【Web】JQuery ajax()原理与使用

1.实现原理

基本步骤包括：

• HTML+CSS 实现页面
• XMLHttpRequest和web服务器进行数据的异步交换
• 运用JS操作DOM，实现动态局部刷新

在JS中需要使用到XHR(XMLHttpRequest),初始化方法为

var request=new XMLHttpRequest();

完整的HTTP请求：需要下面七个步骤：

1.建立TCP连接
2.Web浏览器向Web服务器发送请求命令
3.Web浏览器发送请求头信息
4.Web服务器应答
5.Web服务器发送应答头信息
6.Web服务器向浏览器发送数据
7.Web服务器关闭TCP连接

一个HTTP请求由四部分构成：

1.Http请求的方法或者动作，比如是GET还是POST
2.正在请求的URL
3.请求头，包含客户端环境的信息，身份验证信息等
4.请求体，也就是请求正文，正文中可以包含客户提交的查询字符串信息，表单信息等。 注：请求头和请求体之间存在空行！

• GET请求用于信息的获取，使用URL传递参数，对发送的信息数量有限制，2000字符。一般用于查询
• POST用于修改服务器上的资源

一个HTTP相应包含三个部分

1.一个数字和文字组成的状态码，用来显示请求是成功还是失败。
2.响应头，例如服务器的类型，日期时间，内容类型和长度
3.响应体，也就是响应的正文。

状态码由三位数字构成：

1XX：信息类
2XX：成功
3XX：重定向，请求没有成功
4XX：客户端错误，请求错误
5XX：服务器错误

JS中请求方式

XHR：发送请求：
open(method,url,async)//发送请求方法,请求地址，同步/异步
setRequestHeader("Contenttype":"application/xwwwformurlencoded")//一定要写在send中间，在POST之中一定要填写
send(String)//GET：参数可以不填写，因为所有的信息都在url中

XHR：取得相应
responseText：获得字符串形式的相应数据
responseXML:获得XML形式的相应数据
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader()获取所有相应报头
getResponseHeader()：查询相应中某个字段的值

readyState属性：
0:请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用了
2：请求已接受，也就是收到了头信息
3.请求处理中，也就是接收到相应主体了
4.请求已完成，响应已经完成了
通过监听事件：

request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
//request.responseText}
}

2.定义

• 定义：ajax()方法通过HTTP请求加载远程数据。
• 格式：$.ajax()
• 参数：

名称	类型/默认值	作用
async	Boolean/true	默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
complete(XHR, TS)	Function	请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。
data	String	发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。
dataType	String	预期服务器返回的数据类型。
success	Function	请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
url	String 默认值: 当前页地址。	发送请求的地址。

- 用法实例：

    function example1(){
        $.ajax({
            type:"POST",
            url:"../MyServlet",
            data:      {"username":$("#user").val(),"truename":$("#name").val()},
            success:function(){
                $("#hint_modal").modal();
                $("#menu_title").text("提示框");
                $("#menu_text").text("您的修改已成功提交！");
            },
            error:function(jqXHR){
                $("#menu_text").text("发生错误"+jqXHR.status);
                $("#hint_modal").modal();
            }
        });
    }

function example2(){
    $.ajax({
            type:"GET",
            url:"../MyServlet1",
            success:function(JSONdata){         
                var data=JSON.parse(JSONdata);
                var length=data.length-1;
                $("#user").val(data[length].username);
            },
            error:function(jqXHR){
                $("#menu_text").text("发生错误"+jqXHR.status);
                $("#hint_modal").modal();
            }
        });
}

• 发送数据到服务器：
  data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: ‘value1’, key2: ‘value2’} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。

注：

success:是一个方法，请求成功后的回掉函数，传入返回后的数据，以及包含成功代码的字符串，相当于response.text
error:传入XHR对象

2.传递JSON数据的方法

首先，我们需要了解JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法。

1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象
2. JSON.stringify(obj) : 将一个JSON对象转换成字符串
3. jQuery.parseJSON(jsonString) : 将格式完好的JSON字符串转为与之对应的JavaScript对象。
4. JSON.parse()和jQuery.parseJSON()的区别：
   有的浏览器不支持JSON.parse()方法，使用jQuery.parseJSON()方法时，在浏览器支持时会返回执行JSON.parse()方法的结果，否则会返回类似执行eval()方法的结果。

具体的实例演示参见：

[http://www.jb51.net/article/87642.htm]

转换方法：

$(function(){
    $('#example').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
             var html = ''; 
             $.each(data, function(commentIndex, comment){
                         });
                         }
         });
    });
});