ajax（附脑图）

一、ajax简介

1.什么是ajax

1.Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），

2.AJAX 是一种用于创建快速动态网页的技术。

3.通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

4.可以在不重新加载整个网页的情况下，对网页的局部进行更新。

5.传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

​

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

2.ajax的实现原理

1.浏览器创建核心XMLHttpRequest对象

2.浏览器发送HttpRequest请求，到服务器

3.服务器接收浏览器发送过来的HttpRequest请求。

4.服务器创建响应的数据，响应给客户端浏览器

5.浏览器接收到服务器返回的内容，可以对页面进行更新

3.ajax的优缺点

a.优点

              ```xml

a) 异步更新,提高效率； b) 实现局部的刷新，可以不用修改整个页面; c) 提高用户的体验； ```

a. 缺点

a) 异步请求不适用所有的场景。异步没有启动的前后顺序。

b) 异步增加服务器的压力。

c) 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题

4.什么是异步

异步:客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。可以同时发起多个请求;

同步:须当一个请求执行完毕之后，才可以发起新的请求。

5.ajax使用场景

1.校验用户是否存在

2.省市级联

3.计算购物车数据

二、原生ajax

第一步:创建HttpXMLRequest

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

创建对象:

//创建对象

    function createXmlRequest() {

        //普通的浏览器

        var xmlRequest;

        try {

            //  //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

            xmlRequest = new XMLHttpRequest();

        } catch (e) {

            // IE6, IE5 浏览器执行代码

            try {

                xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

            } catch (e) {

                alert("xmlRequest对象创建失败，浏览器不兼容，请更换");

            }

        }

        return xmlRequest;

    }

 

第二步：打开连接

通过xmlReqest.open(),打开与服务器的连接

//2.打开与服务器的连接open  

//参数一:请求方式  参数二:服务器的地址  参数三：是否异步 true异步 

xmlRequest.open("get", "/day05_ajax/Ajax1Servlet?username=zhangsan",true);

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

第三步:发送请求到服务器中

通过xmlReqest.send()方法，发送请求

get：传参在url地址的时候就传递了

post:可以在send()里面传递参数。如果不传可以给一个null值。

如果是post请求还需要在send之前，添加一个文件的请求头信息:

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

代码实现:

//3.发送请求send  get

xmlRequest.send();

//---------------------------------------

//post需要添加请求头

xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//3.发送请求send  post

xmlRequest.send("username=zhangsan");

​

第四步:监听状态，并接收值

通过onreadystatechange事件进行监听状态：

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: "OK"404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

    //4.监听状态

        xmlRequest.onreadystatechange = function() {

            //获取状态值   

            //两种状态  :readyState:当前对象的状态(0-4)

            //       status:服务器返回的状态码(200,404,500)

            //当请求响应完毕，并发返回的是成功200，才做处理

            if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {

                //接收服务器传过来的内容

                var content = xmlRequest.responseText;

                document.getElementById("show").innerHTML = content;

            }

        }

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

 

三、jquery实现ajax

使用jquery封装好的方法，操作ajax.

使用起来方便，代码更少；

因为使用jquery所以浏览器兼容性更强;

方法	描述
$.ajax()	执行异步 AJAX 请求
$.get()	使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.post()	使用 AJAX 的 HTTP POST 请求从服务器加载数据

 

1.$.ajax({…参数});

该方法是jquery实现ajax的底层方法，可以发送post请求，也可以是get请求

相关参数:

type:请求方式

url:服务器路径

data:传递参数

dataType:返回参数的类型

async:是否异步请求

cache:是否缓存

success:成功之后的回调函数

error:失败之后的回调函数

其他的参数可以看jquery ajax 的帮助文档

​

代码:

    //点击事件

        $("#ajaxPost").click(function() {

            //jquery  ajax

            $.ajax({

                //参数

                type : "get", //请求方式

                url : "${pageContext.request.contextPath}/Ajax2Servlet", //服务器的路径

                //data : "username=xiaohua",//参数

                dataType : "json",//返回值类型

                success : function(data) {//成功之后的回调函数

                    alert(data);

                },

                error : function(data) {

                    alert("error---:" + data);

                }

            });

        });

 

2.$.get 向服务器发起get请求

这种方式只能发起get请求

2.1.语法

$.get(URL,data,function(data,status,xhr),dataType)

参数	描述
URL	必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数：data - 包含来自请求的结果数据status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型："xml" - 一个 XML 文档"html" - HTML 作为纯文本"text" - 纯文本字符串"script" - 以 JavaScript 运行响应，并以纯文本返回"json" - 以 JSON 运行响应，并以 JavaScript 对象返回"jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

2.2.代码

//点击事件

        $("#ajaxGet").click(function() {

            $.get("${pageContext.request.contextPath}/Ajax2Servlet",function(data){

                alert(data.name);

            },"json");

        });

 

 

3.$.getJSON()

只是不用设置返回值类型，默认的是json。只有三个参数

 

4.$.post

$.post() 方法使用 HTTP POST 请求从服务器加载数据

4.1.语法

$(selector).post(URL,data,function(data,status,xhr),dataType)

参数	描述
URL	必需。规定将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数：data - 包含来自请求的结果数据status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型："xml" - 一个 XML 文档"html" - HTML 作为纯文本"text" - 纯文本字符串"script" - 以 JavaScript 运行响应，并以纯文本返回"json" - 以 JSON 运行响应，并以 JavaScript 对象返回"jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

4.2代码

//点击事件

        $("#ajaxPost").click(function() {

            $.post("${pageContext.request.contextPath}/Ajax2Servlet",function(data){

                alert(data.name);

            },"json");

        });

 

以下为整理好的脑图：