AJAX（JS&&JQ&&H5）

一 AJAX的简介：

AJAX是“Asynchronous Javascript And XML”（异步JavaScript和XML），通过后台与服务器实现少量的数据交换，可以使页面实现更新。而且是在不加载整个页面的情况下实现网页上某个部分的更新。其本质是在HTTP协议的基础上以异步的方式与服务器通信。

认识什么是异步：

异步是指某段程序执行时不会影响其他程序的执行，其表现形式为程序的执行顺序不依赖于程序本身的书写顺序，否则为同步。

二 AJAX常见应用场景：

AJAX的常见用处有浏览器搜索，如百度关键字检索。还有各个网站的登录，比如京东的登录用户名验证。以及网页上的分页，常见的有百度图片里的瀑布流分页。

三 JavaScript中AJAX的实现方式

总结为四步：

第一：创建AJAX对象

标准模式：XMLHttpRequest

IE6：   ActiveXObject("Microsoft.XMLHTTP"); （考虑兼容问题）

//第一步：创建AJAX对象

var xhr;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest(); //标准模式

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP") //IE6

}

第二步：连接服务器  xhr.open(请求方式get或post,请求路径,是否异步);

//第二步：连接服务器

//Xhr.open(“GET”,”handler.php?random=”+Math.random()+”&name=张三&age=12”,true);

xhr.open("POST","handler.php",true);

//若是post请求则需要如下设置

var data = "name=张三&pwd=1234565";

//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

第三步：发送请求

发送请求  xhr.send();  //post请求需要传参数。Get请求不用传参数

xhr.send(data);  //POST请求若有提交的数据则传

// Xhr.send(null);//get请求不需要传实参

第四步：接收响应的内容  xhr.onreadystatechange 事件（若异步则注册该事件）

if(xhr.readyState==4){   //读取完成（并不是成功）

if(xhr.status==200){  //状态码 代表成功

var data = eval(xhr.responseText)

alert(data[0].name);

}else{  //代表失败

alert("失败")

}

}

补充：

1.用GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2.xhr.readyState     请求状态

readyState是一个只读属性，用一个整数和对应的常量，表示XMLHttpRequest请求当前所处的状态。

• 0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
• 1，对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
• 2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
• 3，对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
• 4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。

xhr.responseText; 服务端返回的内容

3.Xhr.status  HTTP状态码

status属性为只读属性，表示本次请求所得到的HTTP状态码，它是一个整数。一般来说，如果通信成功的话，这个状态码是200。

• 200, OK，访问正常
• 301, Moved Permanently，永久移动
• 302, Move temporarily，暂时移动
• 304, Not Modified，未修改
• 307, Temporary Redirect，暂时重定向
• 401, Unauthorized，未授权
• 403, Forbidden，禁止访问
• 404, Not Found，未发现指定网址
• 500, Internal Server Error，服务器发生错误

基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

四 AJAX的封装：

/*

ajax工具库：

method:请求方式，get或post;

url:请求的路径；

isAsync:是否异步请求，true或false

data:发送的请求数据

success:成功时候的要执行的函数。

error:请求失败的时候要执行的函数

*/

function ajax(o){

//第一步：创建AJAX对象

var xhr;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest(); //标准模式

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP") //IE6

}

//第二步 和服务器建立连接

if(o.method.toLowerCase()=="get"){ //如果是get请求方式

if(o.data){  //如果有发送数据

o.url= o.url + "?random=" + Math.random() + "&" + urlParmsHandler(o.data);

xhr.open("get",o.url,o.isAsync)

}else{

o.url = o.url + "?random=" + Math.random(); //随机地址，用来更新

xhr.open("get",o.url,o.isAsync)

}

///xhr.open(“get”,,true);

//发送请求

xhr.send();

}else{    //如果是post请求

xhr.open("post",o.url,o.isAsync);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //模拟表单提交

//发送请求

xhr.send(urlParmsHandler(o.data));

}

//是否是异步

if(o.isAsync){

//注册状态监听事件

xhr.onreadystatechange = function(){

responsetHandler();

}

}else{

responsetHandler();

}

/*处理响应*/

function responsetHandler(){

if(xhr.readyState==4){   //读取完成（并不是成功）

if(xhr.status==200){  //状态码 代表成功

o.success(xhr.responseText);

}else{  //代表失败

o.error(xhr.statusText);

}

}

}

}

/*

数据处理工具

*/

function urlParmsHandler(obj){

var arr = [];  //定义一个数组存放数据

/*遍历对象的属性和值并添加的数组中*/

for(var key in obj){

//属性名 ： 属性值

arr.push(key + "=" + obj[key]);

}

//将arr数组中的数据用join方法组合成字符串

return arr.join("&");

}

五 JQ使用AJAX：

jQuery Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法，在处理复杂的ajax请求时，jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方法，它对jQuery.ajax()方法进行了封装，使得我们在处理一些简单的Ajax事件时，不需要使用jQuery.ajax()方法

以下5个方法执行一般Ajax请求的简短形式：

1.load(url,[data],[callback])

载入远程HTML文件代码并插入至DOM中，默认使用GET方式，传递参数时自动转换为POST方式。

url:要载入的远程url地址
data:发送至服务器的key/value 数据
callback:载入成功时的回调函数
示例代码如下：

//无参数、无回调函数
$("#showload").load("load.html");
//无回调函数
$("#showload").load("load.html", { "para": "para-value" });
$("#showload").load("load.html", { "para": "para-value" },
    function() {
        //处理
    })

2.$.get(url, [data], [callback])
使用get方式从服务器端获取数据。

发送请求的URL地址
要发送给服务器的数据
载入成功时回调函数
示例代码如下：

$.get("jqueryget.htm", { "id": this.id },
    function(req) {
        //成功时的回调方法
        $("#showget").html(req);
    });
})

3.使用POST方式来进行异步请求。同$.get()相比，差别在于请求的方式，所以这里不做特别的说明了，使用方法同$.get()相似。

4.$.getScript(url,[callback])

通过 GET 方式请求载入并执行一个JavaScript文件。也是jQuery.ajax的一种简单的使用方法，可以看看ajax加载js，所以在这里也不做特别的说明了。

5.$.getJSON(url,[data],[callback])
通过get方式获取json格式的数据。

6.参数列表：

参数名	类型	描述
url	String	(默认: 当前页地址) 发送请求的地址。
type	String	(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout	Number	设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async	Boolean	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend	Function	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) {  this; // the options for this ajax request}
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) {  this; // the options for this ajax request}
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, String	发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType	String	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error	Function	(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) {  // 通常情况下textStatus和errorThown只有其中一个有值   this; // the options for this ajax request}
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) {  // data could be xmlDoc, jsonObj, html, text, etc...  this; // the options for this ajax request}

这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的。

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

7.$.ajax()
使用$.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。

$.ajax({
    url: "http://www.hzhuti.com",    //请求的url地址
    dataType: "json",   //返回格式为json
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
    data: { "id": "value" },    //参数值
    type: "GET",   //请求方式
    beforeSend: function() {
        //请求前的处理
    },
    success: function(req) {
        //请求成功时处理
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
});

$.ajax的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( {  
    url:'productManager_reverseUpdate',// 跳转到 action  
    data:{  
             selRollBack : selRollBack,  
             selOperatorsCode : selOperatorsCode,  
             PROVINCECODE : PROVINCECODE,  
             pass2 : pass2  
    },  
    type:'post',  
    cache:false,  
    dataType:'json',  
    success:function(data) {  
        if(data.msg =="true" ){  
            // view("修改成功！");  
            alert("修改成功！");  
            window.location.reload();  
        }else{  
            view(data.msg);  
        }  
     },  
     error : function() {  
          // view("异常！");  
          alert("异常！");  
     }  
});

 

六 HTML5中使用AJAX：

此方法是对原生js中的AJAX的增强，方法更为简洁。主要实现了之前原生的AJAX不能跨域请求的难题，

(function(){

var xhr = new XMLHttpRequest();

xhr.open("POST","02.json");

var form = new FormData();

xhr.send(); //form

xhr.onload = function(){

console.log(xhr.responseText);

}

})()