ajax | 泽恒

AJAX编程

即 Asynchronous Javascript And XML（Asynchronous是异步的意思），AJAX不是一门新的语言，而是对现有技术的综合利用。

本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

异步（Asynchronous）

指某段程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

其优势在于不阻塞程序的执行，从而提升整体执行效率。

上图中方式1，就是同步，方式3就是异步，所以为了更好明白，看下图：

现实生活中的一个例子：

打电话是同步，你和某个人通话，其他人是不能打进来的,被堵塞了，发消息是异步，你和某个人发消息，别人也是能发消息给你收到的。

所以异步是我们程序在执行中的一种方式而已

XMLHttpRequest是可以以异步方式处理的程序

扩展：讲到同步异步，就要说到线程安全性，同步是线程安全的，但是效率低，异步线程不安全，但是效率高。

XMLHttpRequest （javascript）

浏览器内建对象是浏览器自带的，已经有的，不需要我们自己创建的，这种对象就是浏览器用来给我们提供功能的，比如：

<script> var date = new Date(); </script>

Date就是一个内建对象，js直接可以使用的，而XMLHttpRequest也同样是。

XMLHttpRequest是一个浏览器内置(内建)对象，用于在后台与服务器通信（交换数据），由此我们便可以实现对网页的部分更新，而不是刷新整个页面。

简而言之：XMLHttpRequest是用来帮我们发送请求的，下面我以post请求方式为例写一个演示，看下面的代码演示之前，首先我们得明白几个方法的含义：

和获取日期 var date = new Date() 一样，我们获取请求也得有请求对象 var xhr = new XMLHttpRequest();

该请求对象有一个属性，xhr.readyState，这个是响应码，我们的请求当前处于什么状态，他会有不同的值，具体下面会说，先知道就行。

我们客户端与服务器之间的交互通过HTTP协议的，HTTP协议规定了请求和响应的格式。所以我们的请求要有请求行、请求头、请求体（get方式没有请求体），所以该请求创建后要设置它们。

注：当以post形式提交表单的时候，请求头里会设置Content-Type：application/x-www-form-urlencoded，以get形式不需要

该请求对象有一个事件onreadystatechange，看名字就能明白这是监听readyState状态码变化的事件，也就是说，readyState值每变化一个就会触发一次该事件。

该请求有一个属性xhr.responseText，请求发送后，服务器会给响应，这是获取响应体的属性。

先看该对象的API:
接下来再看post方式请求的代码演示：

<script type="text/javascript">
	//创建一个请求对象
	var xhr = new XMLHttpRequest();
	
	console.log(xhr.readyState);
	
	//设置请求行
	xhr.open('post','8-1.html');
	
	console.log(xhr.readyState);
	
	//设置请求头（post方式才有的，背下来别问为啥）
	xhr.setRequestHeader('Content-type','application/x-www/form-urlencoded');
	
	console.log(xhr.readyState);
	
	//设置请求主体
	xhr.send('username=jhh&pass=123');
	
	console.log(xhr.readyState);
	
	//接收服务器响应
	xhr.onreadystatechange = function(){
		
		console.log(xhr.readyState);
		
		if(xhr.readyState==4){
			//console.log('响应结束');
			
			//获得浏览器响应体的方法
			//xhr.responseText
			console.log(xhr.responseText);
			
			//通过DOM操作放到页面上
			document.querySelector('#result').innerHTML=xhr.responseText;
			
		}
	}
</script>

XMLHttpRequest（get&post差异）

get方式请求代码演示：

<script type="text/javascript">
	//创建一个请求对象
	var xhr = new XMLHttpRequest();
	
	//设置请求行
	xhr.open('get','8-1.html');\
	
	//设置请求头(get方式没有)
	//xhr.setRequestHeader('Content-type','application/x-www/form-urlencoded');
	
	//设置请求体（get方式没有）
	xhr.send(null);//xhr.send();也行
	
	//接收服务器响应
	xhr.onreadystatechange = function(){
		
		if(xhr.readyState==4){
			var result = xhr.responseText;
			
			console.log(result);
		}
	}
</script>

扩展：我们post方式设置了请求头xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);而get方式没有，这是为什么呢？

首先，我们以前解决request和response中文乱码的方式：

post方式提交的中文乱码问题解决：request.setCharacterEncoding("utf-8"); 设置服务器接收request请求是以utf-8码表解码

get方式和post方式提交都可以用的解决中文乱码方式：String username= new String(request.getParameter("username").getBytes("ISO8859-1"),"utf-8");

服务器响应客户端中文乱码解决：
				方式一：
							1.设置response查询的码表为utf-8而不是ISO8859-1
								response.setCharacterEncoding("utf-8");
							2.通过一个头Content-Type告知客户端使用何种码表
								response.setHeader("Content-Type","text/html;charset=utf-8");

				方式二：
							该方式是在方式一的基础上融合的
							response.setContentType("text/html;charset=utf-8");

和以前的解决乱码方式一样，这里post方式请求设置请求头是告知服务器我们是以’application/x-www-form-urlencoded’的格式编码的，你服务器也要以这个格式去解码我们的请求体，然而get方式没有请求体，所以也不用去告诉他了，所以可写可不写。同样，就算是post方式请求，如果我们请求体没有内容，也可以不写。

XMLHttpRequest(status)

案例：

我们访问一个不存在的页面8-1.html

<script type="text/javascript">
	var xhr = new XMLHttpRequest();
	xhr.open('get','8-1.html');
	xhr.send(null);
	xhr.onreadystatechange = function(){
		
		if(xhr.readyState==4){
			console.log(1);
			console.log(xhr.responseText);
		}
	}
</script>

结果：我们进入了if判断中，并且返回了值。

分析：虽然页面不存在，但是，服务器还是有响应给我们，不过这个响应结果是告诉我们没有该页面404，所以我们能获取到响应结果。但是，我们要的结果没有，获取到响应也没有意义，不是我们要的，而且如果我们对结果做处理可能还会出错。所以我们还要加一个判断条件（状态码为200），让我们能获取到想要的结果。

处理方式：if(xhr.readyState==4&&xhr.status==200)

XMLHttpRequest(同步&异步)

首先ajax是一个异步技术，我们这里的内建对象XMLHttpRequest并不是指ajax，而是指它属于ajax技术
我们上面写的代码，就是一个异步的代码，他不会阻塞下面的代码运行，也就是说不管响应有没有结束，他是直接往下面运行的，同步的话，必须响应结束才能运行下面代码
xhr.open(‘get’,’8-1.html’);方法其实还有一个参数，是决定该请求是同步还是异步，默认是true，异步，如果xhr.open(‘get’,’8-1.html’，false);就是同步了，看代码对比：

异步：

	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		xhr.open('get','8-1.html',true);
		xhr.send(null);
		xhr.onreadystatechange = function(){
			
			if(xhr.readyState==4&&xhr.status==200){
				console.log(1);
				console.log(xhr.responseText);
			}
		}
		console.log('我是异步程序后的代码');
	</script>


	异步方式的请求，响应还没来，就已经输出了'我是异步程序后的代码'了，因为他不堵塞程序运行，每次readyStatus变化就会调用事件，当readyState为4就进入判断打印出响应内容。

同步：

	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		xhr.open('get','8-1.html',false);
		xhr.send(null);
		console.log(xhr.responseText);
		console.log('我是同步程序后的代码');
	</script>


	同步方式的请求，响应还没来，不会输出'我是异步程序后的代码'了，因为他堵塞程序运行，这里不用写事件了，因为响应不来，他会停在console.log(xhr.responseText);这里一直等待响应，只有响应有了才会执行下面的语句，所以不用监听判断了直接获取响应。

注：我们知道ajax是一项异步技术，而XMLHttpRequest只能说实现了异步，如果我们这里用它实现了同步，那么这个对象就不是ajax技术了，只能算是js的一个内建对象，它只有用了异步方式，才能算作是ajax技术。

XMLHttpRequest(传参)

post方式：xhr.send(‘username=jhh&age=25’);

get方式：xhr.open(‘get’,’8-1.html?username=jhh&age=25’);

XMLHttpRequest(API详解)

xhr.open() 发起请求，可以是get、post方式

xhr.setRequestHeader() 设置请求头

xhr.send() 发送请求主体 get方式使用xhr.send(null)

xhr.onreadyStatechange = function(){} 监听响应状态(xhr.readyState的值)

以下状态不用记忆，只需要了解有状态变化这个概念

xhr.readyState = 0 时，open没有调用（请求未创建）

xhr.readyState = 1 时，open已调用（请求已创建）

xhr.readyState = 2 时，服务器接收到头消息（xhr.setRequestHeader(…)）

xhr.readyState = 3 时，客户端开始接收到响应主体

xhr.readyState = 4 时，客户端接收服务器端响应完成

xhr.status 表示响应码，如200

xhr.statusText 表示响应信息，如OK

xhr.getAllResponseHeaders() 获取全部响应头信息

xhr.getResponseHeader(‘key’) 获取指定头信息

xhr.responseText、xhr.responseXML 都表示响应主体

注：GET和POST请求方式的差异(面试题)

GET没有请求主体，使用xhr.send(null)
GET可以通过在请求URL上添加请求参数
POST可以通过xhr.send(‘name=jhh&age=25’)
POST 需要设置：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
GET效率更好（应用多）
GET大小限制约4K，POST则没有限制