Ajax 笔记

一、什么是Ajax

Ajax：(Asynchronous Javascript And XML) 即异步Javascript和XML，即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,也可以是text ，现在更多的是json）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

其核心就是学习XMLHttpRequest对象的相关操作，其向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据

二、同步交互和异步交互

• 同步交互：是面向比特的传输，它的单位是帧，它传输的时候要求接收方和发送方之间的时钟是一致的。客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
• 异步交互：是面向字符的传输，它的单位是字符；异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后继续执行下一步，等到结果返回之后，浏览器会通知js执行相应的回调。

三、Ajax的优缺点

优点：
        异步交互：增强了交互体验。
        性能：因为服务器无需响应整个页面，只需要响应部分内容，服务器的压力减轻了。
缺点：
        没有浏览历史，不能回退。
        ajax无端的增多了对服务器的访问次数，给服务器增多了很多压力。
        因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题。

四、Ajax的操作（重要）

核心是学习XMLHttpRequest对象的相关操作 ，XMLHttpRequest 对象方法

使用过程：

第一步 创建XMLHttpRequest对象

大多数浏览器，可以通过：var xmlHttp = new XMLHttpRequest();

少数浏览器存在版本兼容问题，我们可以写一个函数，来专门处理不同的情况而产生XMLHttpRequest对象

function createXMLHttpRequest(){
	try {
        //适合大多数
		return new XMLHttpRequest();
	} catch(e) {
		try {
            //IE 6.0
			return new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e){
			try {
                //IE 5.5 及更早
				return new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e){
				alert("不支持您的浏览器！");
				throw e;
			}
		}
	}
}

第二步 打开与服务器的连接

使用 xmlHttp.open()，来打开与服务器的连接，它需要三个参数：( )

请求方式：可以是GET或者POST；
请求的URL：指定服务器端资源，例如/xxx/AServlet；
请求是否为异步：如果为true表示发送异步请求，否则为同步请求。

方法	例子
GET	const xhr = new XMLHttpRequest() // 直接在地址后面加一个 ?，然后以 key=value 的形式传递 // 两个数据之间以 & 分割 xhr.open('get', './data.php?a=100&b=200') xhr.send()
POST	const xhr = new XMLHttpRequest() xhr.open('post', './data.php') //如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content- type // 告诉一下服务端我给你的是一个什么样子的数据格式 // xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded') // 请求体直接再 send 的时候写在 () 里面就行 // 不需要问号，直接就是 'key=value&key=value' 的形式 xhr.send('a=100&b=200')

第三步 发送请求

xmlHttp.send();

一个最基本的 ajax 请求就是上面三步 但是光有上面的三个步骤，我们确实能把请求发送到服务端
 如果服务端正常的话，响应也能回到客户端 但是我们拿不到响应
 如果想要拿到响应，我们需要有两个前提条件
 1. 本次 HTTP 请求是成功的，也就是我们下面要说的 http 状态码为 200 ~ 299
 2. ajax 对象也有自己的状态码，用来表示本次 ajax 请求中各个阶段

怎么得到xmlHttp对象的状态呢？我们可以使用属性var state = xmlHttp.readyState，它的值可能是0 1 2 3 4 。

5个状态分别表示：
    0：表示刚创建，还没有调用open()方法
    1：表示请求开始，调用了open()方法，但是没有调用send()方法
    2：调用完了send()方法
    3：服务器已经开始响应，但是不表示响应结束了,其也有对应的状态
    4：服务器响应结束了。（通常我们只关心这个状态）

得到服务器的响应状态码，使用var status = xmlHttp.status;，例如是200 404 500

只有当 readyState === 4 且服务器的响应状态码为200的时候，我们才可以正常使用服务端给我们的数据

第四步 处理请求 得到响应

得到服务器响应的内容

    可以使用var content = xmlHttp.responseText;得到的是服务器的响应的文本格式的内容
    也可以使用var content = xmlHttp.responseXML，这样得到的是服务器的响应的xml响应的内容，它是一个document对象

这样我们可以形成如下的代码用来处理我们需要响应的内容：

// xmlHttp的5种状态都会调用本方法，但是我们通常只关心4状态
    xmlHttp.onreadystatechange = function() {
        // 双重判断，判断是否为4状态，并且判断是否为200
        if (xmlHttp.readystate == 4 && xmlHttp.status == 200) {
            // 获取服务器的响应内容
            var text = xmlHttp.responseText;
            ...
            ...   
        }
    }