Ajax 工作原理

一、什么是Ajax？

Ajax(Asynchronous JavaScript and XML):异步的js和XML
是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

组成：js，css，DOM，XMLHttpRequest对象

二、工作原理：

1. Ajax提供与服务器异步通信的能力，可在web页面触发js事件中中服务器发出异步请求，如执行更新或查询数据库
2. Ajax的核心是js对象XMLHttpRequest，改对象在IE5中首次引入，使用户通过js向服务器提出请求并处理相应，不阻塞用户
3. 当web服务器的相应返回时，使用js回调函数和CSS相应的更新页面的局部页面，而不是刷新整个页面
4. 在页面与服务器交互的过程中不中断用户操作，用户甚至察觉不到浏览器正在与服务器进行通信

三、XMLHttpRequest 对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1. 创建XMLHttpRequest对象

variable=new XMLHttpRequest();

2. 获取XMLHttpRequest对象

浏览器内核不同获取方式不同

底层代码:

// 获取对象
var xmlhttp;
function createXMLHttpRequest(){
     
    if(window.ActiveXObject){
        //IE
        xmlhttp=new ActiveXObject('Microdoft.XMLHTTP')
    }else if(window.XMLHttpRequest){
       //Mozilla
        xmlhttp=new XMLHttpRequest()
    }
}

3. XMLHttpRequest的方法

方法	属性
open(‘method’,‘url’)	建立服务器的调用 ，method：请求的类型；GET 或 POST ，url：文件在服务器上的位置
send(content)	向服务器发送数据 ，content：仅用于 POST 请求

4. XMLHttpRequest的属性

• Onreadystatechange 请求状态发生改变时，指定事件处理函数
• readyState 请求响应过程中的状态码

状态码	含义
0	未初始化
1	正在加载
2	加载完成
3	交互
4	完成

• responseText 服务器端的相应信息
• status 服务器端响应的状态码

状态码	含义
404	请求的服务器资源不存在
500	服务器端错误
304	请求方式错误

四、jQuery对Ajax的封装

1.  向远程服务器发送get请求
$.get(url,[data]m[callback],[type])  
2.  向远程服务器发送post请求
$.post(url,[data]m[callback],[type])  
3. 
$.ajax({
     
	url:'远程服务器地址',
	type:'请求方式',
	data:{
     
			参数名1：参数值1,
			参数名2：参数值2,
			...
	}
	dataType:'服务器响应的数据类型',
	success:function(result){
     
		//请求成功后的回调函数
	}
	error:function(result){
     
	//请求失败后的回调函数
	}
})