AJAX笔记-原生js

简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

核心

Ajax引擎XMLHttpRequest

创建XMLHttpRequest对象

1. var ajax = new XMLHttpRequest();//应用于主流浏览器，一般写法
2. var ajax = new ActiveXObject("Msxml2.XMLHTTP");//低版本ie

• 可以通过if(window.XMLHttpRequest){....}else if(window.ActiveXObject){....}进行判断。

XMLHttpRequest常用属性

1.readyState属性

类型：number，有5个值分别为0,1,2,3,4

• 0---代表XMLHttpRequest已经建立，但还没有初始化
• 1---代表open发放已经调用，但未调用send方法，请求提出，没有发送
• 2---代表send方法已经调用，请求发送
• 3---代表请求发送成功，服务器正在响应
• 4---代表请求完成，数据成功接收

2.responseText属性

类型：String

• 返回包含客户端接收到的HTTP响应的文本内容

3.responseXML属性

类型：Document

• 返回 XML 文档对象

4.status属性

类型：number

描述http状态码

• 1XX：代表请求已被接受，需要继续处理，这类响应是临时响应（消息）
• 2XX：代表请求已成功被服务器接收、理解、并接受（成功）
• 3XX：代表需要客户端采取进一步的操作才能完成请求（重定向）
• 4XX：代表了客户端看起来可能发生了错误，妨碍了服务器的处理（请求错误）
• 5XX：代表了服务器在处理请求的过程中有错误或者异常状态发生（服务器错误）
• 600：源站没有返回响应头部，只返回实体内容

一般只用到200（OK）、404（请求资源未找到）、405（请求方法不被服务器支持）、500（服务器源码错误）

XMLHttpRequest常用方法

1.open(method, url, async, username, password)

• method表示请求方式"get"和"post"

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

以下情况中，用 POST 请求：

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

以下情况中，用GET方法：

• 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
• 请求结果无持续性的副作用。
• 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

• url表示请求发送到服务器的相应url，自动解析成绝对地址
• async, username, password是非必填项
• async表示请求方式是异步（true）还是同步（false），默认是异步（true）

2.send(body);   ---@param {Object} body

如果请求方式为get，body为null

如果请求方式为post，body为请求参数，必须设置请求头setRequestHeader('Content-type','application/x-www-form-urlencoded');

3.setRequestHeader(header,value)

设置请求头

例如setRequestHeader('Content-type','application/x-www-form-urlencoded');

设置传输数据类型，即服务器需要我们传送的数据类型

XMLHttpRequest之onreadystatechange事件

每当readyState的值变化时，都会触发该事件，所以正常情况下，一次请求完成会触发5次

使用流程

function getData(){
	  		//创建ajax引擎对象
			var ajax;
			if(window.XMLHttpRequest){//主流浏览器支持ajax
				ajax = new XMLHttpRequest();	
			}else if(window.ActiveXObject){//ie
				ajax = new ActiveXObject("Msxml2.XMLHTTP");
			}	
	  		//重写onreadtatemechange函数(声明函数)
	  		ajax.onreadystatechange=function(){
	  			if(ajax.readyState==4){//响应成功
	  				if(ajax.status==200){
			  			//获取响应内容
			  			var result = ajax.responseText;
			  			//获取元素对象,并显示结果
			  			document.getElementById("show").innerHTML=result;
	  				}else if(ajax.status==404){
	  					document.getElementById("show").innerHTML='请求资源已失效';
	  				}else if(ajax.status==500){
	  					document.getElementById("show").innerHTML='服务器繁忙';
	  				}else{
	  					document.getElementById("show").innerHTML='其他错误'+ajax.status;
	  				}
	  			}
	  			
	  		}
	  		//发送请求
	  		ajax.open("get","ajax");
  			ajax.send(null);
  		}

之后便可以在ajax中处理请求

jQuery中的ajax

。。。。。。