ajax 基本用法

一、简介
1、ajax是Asynchronous Javascript and XML的缩写，意思是执行异步的网络请求

2、我们会发现使用form表单submit按钮提交表单的时候，网页会有执行刷新操作，在新页面告知操作结果，而ajax技术可以使得向服务器请求数据的时候无需卸载页面，得到更好的体验

3、ajax的核心是XMLHttpRequest对象，它实现了异步方式从服务器获取数据，也就是用XHR对象获取到服务器的数据，再使用DOM将数据更新到页面中

4、虽然ajax名字中包含了XML，但是他只是一种通信手段，与具体数据格式没有关系，因为当时主流使用XML作为前后台通信数据的格式，所以名字中使用了XML；而现在主要使用的都是JSON格式的字符串

二、XMLHttpRequest对象
ajax的实现流程如下：
创建XHR对象
调用open()方法，创建请求
调用send()方法，发送请求
捕获请求状态，判断请求结果
获取数据库返回的数据
1、创建XHR对象
XHR对象首次实现是在ie5上，当时使用的是ActiveX对象，所以XHR下ie上有两个版本的实现方式，ie7以下的ActiveX对象与ie7及以上的XHR对象，其余浏览器统一都是使用的XHR对象

所以创建对象的时候需要有兼容性写法

if(window.XMLHttpRequest){
var request = new XMLHttpRequest();
}else{
//这是ie7以下的写法
var request = new ActiveXObject(“Microsoft.XMLHttp”);
}
����������

2、调用open()方法
request.open(method,url,boolean);
open()方法接收3个参数
method：数据提交方式，字符串形式，可以使用"get"或"post"
url：请求对象地址，字符串表示（get方式与post方式有差异）
boolean：true（默认）表示异步请求，false表示同步请求（相信使用ajax都是为了异步的，所以这里就用true，或者不填写）
get方式请求
使用get方式提交数据时需要将提交内容以固定的格式附加在URL后面，格式如下：
url = “地址 ? name1=value1 & name2=value2”;

//获取到用户名及密码的输入框
var username = document.getElementById(“username”);
var passwd = document.getElementById(“passwd”);
//将输入内容附加在URL后面
var url = “php/get.php?username=”+username.value+"&passwd="+passwd.value;
//调用open()方法
request.open(“get”,url,true);
post方式请求
使用post方式提交数据，提交内容是作为send()方法的参数提交的，所以URL后面无需附加参数

//获取到用户名及密码的输入框
var username = document.getElementById(“username”);
var passwd = document.getElementById(“passwd”);
//将输入内容附加在URL后面
var url = “php/post.php”;
//调用open()方法
request.open(“post”,url,true);
注意：因为已经不再使用form表单，所以后台无法再使用name属性获取数据，之前定义在form表单name属性中的内容现在就是在name1=value1中的name1中，相应的，post方式就是下文中的postbody中的name1

3、调用send()方法
request.send(postbody);
send()方法接收1个参数
postbody：字符串形式，填入需要提交的数据；如果没有提交的数据，可以填入null
get方式请求
因为get方式下的数据已经附加在URL后面提交，所以这里一般填入null

post方式请求
数据的格式如下：
postbody = “name1=value1 & name2=value2”;

//获取到用户名及密码的输入框
var username = document.getElementById(“username”);
var passwd = document.getElementById(“passwd”);
//将输入内容附加在URL后面
var postbody = “username=”+username.value+"&passwd="+passwd.value;
//调用send()方法
request.send(postbody);
注意1：此处用post方式提交数据与用form表单提交毕竟有所不同，服务器会需要程序来读取并解析原始数据，所以我们需要使用XHR来模仿表单提交：

//将Content的头部信息重新设置
//定义表单提交时的内容类型，并以适当类型创建一个字符串 request.setRequestHeader(“Content-Type”,“application/x-www/form-unencoded”);
注意2：这个方法只能加在open()方法之后，send()方法之前

//实际使用方法
var username = document.getElementById(“username”);
var passwd = document.getElementById(“passwd”);

var url = “php/post.php”;
request.open(“post”,url,true);

//放置的位置一定在这里
request.setRequestHeader(“Content-Type”,“application/x-www/form-unencoded”);

var postbody = “username=”+username.value+"&passwd="+passwd.value;
request.send(postbody);
4、捕获请求状态，判断结果
send()方法调用后，请求就会被提交到服务器；多数情况下，我们会发送异步请求先检查请求过程当前的活动阶段，再判断请求是否返回成功

XHR对象相关属性：
readyState：请求 /相应过程的当前活动阶段
responseText：作为响应主体被返回的文本
responseXML：如果相应的内容类型是text/xml或者application这个属性中将保存着响应数据的XMLDOM文档
status：相应的HTTP状态
statusText：HTTP状态说明

作者：小pxu
链接：https://www.jianshu.com/p/ff9e1139ea51
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。