AJAX从入门到深入

一、AJAX简介

1.概述

AJAX（Asynchronous Javascript And XML）

AJAX = 异步 JavaScript 和 XML（标准通用标记语言的子集）；
AJAX 是一种用于创建快速动态网页的技术，在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面；
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

2. 应用场景

• 检查用户名是否被注册
• 省市级联下拉框联动
• 搜索内容自动补全

3. Internet标准

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

二、AJAX原生写法

1. 代码：

//先声明一个异步请求对象
var xmlHttpReg = null;
function ajax() {
	if (window.ActiveXObject) {                 //如果是IE5、IE6
	    xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
	} 
	else if (window.XMLHttpRequest) {
	    xmlHttpReg = new XMLHttpRequest();      //实例化一个xmlHttpReg
	}
	//如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
	if (xmlHttpReg != null) {
		//创建一个HTTP请求
	    xmlHttpReg.open("get", "checknumber.php?type="+gametype
	                                               +"&round="+gameroundno, true);
	    xmlHttpReg.send();  //发送请求
	    xmlHttpReg.onreadystatechange = doResult; //设置回调函数
	}
}

//响应HTTP请求状态变化的函数
  function httpStateChange(){//判断异步调用是否完成
    if(xmlhttp.readyState==4){//readyState==4表示后台处理完成了
      //状态码为0是本地响应成果，200表示处理的结果是ok的
      if(xmlhttp.status==200||(xmlhttp.status==0){
      //判断异步调用是否成功,如果成功开始局部更新数据
        //code...
      }else{
        alert("出错状态码："+xmlhttp.status+"出错信息："+xmlhttp.statusText);
      }
    }
  }

实现步骤：

• step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象；
• step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息；
• step3. 设置响应HTTP状态变化的函数；
• step4. 发送HTTP请求；
• step5. 获取异步调用返回的数据；
• step6. 使用JavaScript和DOM实现局部刷新。
  
  

2.XMLHttpRequest对象及其创建

XMLHttpRequest 对象（是AJAX的基础）
　　所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）
　　XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

创建XMLHttpRequest对象 ：xmlhttp=new XMLHttpRequest();

3.AJAX向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。
向服务器发送请求，使用 XMLHttpRequest 对象的 open() 和 send() 方法

xmlhttp.open("GET","AJAX_info.txt",true);
xmlhttp.send();

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

4.Get and Post

与 Post 相比，Get 更简单也更快，并且在大部分情况下都能用
然而以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

5.XMLHttpRequest 响应

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

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

如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，如下：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

6.XMLHttpRequest readyState

onreadystatechange：

当请求被发送到服务器时，需要执行一些基于响应的任务
每当 readyState 改变时，就会触发 onreadystatechange 事件
readyState 属性存有 XMLHttpRequest 的状态信息

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

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

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

三、AJAX jQuery写法

1. 标准写法

$.ajax({
  
	// 请求类型:get/post
    type: "POST",  
    // 请求的url地址
    url: "/login",
    // 请求的数据类型:可以是html,json,xml等
    dataType: "json", 
	// 请求是否异步,默认为异步(true)
    async:true, 
    // 请求参数
    data: {username:$("#username").val(), password:$("#password").val()},  
   
    beforeSend:function(){
    	// 请求前的处理
    }    
   	success: function(data){ 
   		// 请求成功时的处理 
        console.log(data);  
    }，  
    error:function(e){  
   		// 请求出错时的处理
        console.log(e);  
    }  
});

补充：dataType的属性

$.AJAX()方法中dataType属性要求为String类型的参数，即预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包信息返回responseXML或responseText，并作为回调函数参数传递。

可用的类型如下：

• JSON：返回JSON数据；
• XML：返回XML文档，可用jQuery处理；
• HTML：返回纯文本HTML信息；包含的Script标签会在插入DOM时执行；
• Script：返回纯文本JavaScript代码，不会自动缓存结果，除非设置了cache参数。

2. 简单写法

语法：jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数：

代码示例：

$.get(base + "/project/findByFactory", {"factory": factSelStr}, function (result) {
    console.log(result);
});

四、async 异步同步请求的区别

异步请求：sync设置为true（默认为true）；$.ajax执行后，会继续执行Ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法
同步请求：sync设置为false；在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式
用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。信息错误又要重新

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式
当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验

补充：AJAX默认是异步加载的，也就是说第一个function请求数据时，数据还未返回时便开始执行第二个function了，如果将其设置为同步请求，则会等第一个function执行完后才会加载第二个function。

五、其他问题

1. Ajax请求导出Excel的问题

问题描述：前端发起ajax请求，后台使用POI生成excel文件，最后用response输出excel文件流，整个调用过程没有报任何错，excel文件流能在浏览器控制台输出，但是浏览器没有弹出文件下载，毫无反应。

解决方法：开始以为是浏览器兼容性，或是后台输出文件流代码有问题，后来网上搜索发现有人说不能使用ajax请求导出excel，换成地址重定向window.location.href即可。

代码：

// 导出
$("#customer-export").click(function () {

    var customerArray = new Array();
    $("input:checkbox[name='custCheck']:checked").each(function () {
        customerArray.push($(this).val());
    });
    if (customerArray.length == 0) {
        layer.open({
            skin: "layui-layer-molv",
            title: "提示",
            content: "请勾选导出数据",
            icon: 8
        });
        return false;
    }
    // 传递到controller层是个字符串数组
    var customerJson = customerArray.toString();
    // 不要使用ajax调用
    window.location.href = base + "/customer/exportExcel?customerJson=" + customerJson;
});