javascript之原生ajax请求步骤
一、什么是Ajax？
Ajax的全称是Asynchronous JavaScript and XML（即异步的 JavaScript和 XML，它并不是一种新的编程语言，结合了多项技术的浏览器端的网页开发技术
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
ajax的优点
通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载
ajax的缺点
不支持浏览器back按钮
安全问题 AJAX暴露了与服务器交互的细节
对搜索引擎的支持比较弱
XMLHttpRequest对象 是一种支持异步请求的技术，它是Ajax的核心XMLHttpRequest的作用
可以向服务器提出请求并处理响应，而不阻塞用户
可以在页面加载以后进行页面的局部更新
二、创建XMLHttpRequest对象
要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤
1、创建XMLHttpRequest对象,也就是创建一个异步调用对象
// 第一种方法，封装通用的xhr
function createXHR(){
// 判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，firefox,opera等
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
// 判断IE老版本 ie5或者ie6是 ActiveXObject
}else if(typeof ActiveXObject != 'undefined'){
// 将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr = [
'Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0',
]
// 遍历创建XMLHttpRequest对象
var len=xhrArr.length,xhr
for(var i=0;i<len;i++){
try{
// 创建XMLHttpRequest对象
xhr=new ActiveXObject(xhrArr[i])
break;
}catch(ex){
}
}
return xhr;
}else{
throw new Error('不支持')
}
}
// XMLHttpRequest对象
var xhr= createXHR();
console.log(xhr)
//第二种方法，直接new XMLHttpRequest对象即可
var xhr =new XMLHttpRequest();
console.log(xhr)
两种方法都是一样的2、创建一个新的HTTP请求,并指定该HTTP请求的方法、URL
语法：open(method,url,async)
功能：创建HTTP请求，规定请求的类型、url及是否是异步处理请求
参数说明：
1、method：请求类型，GET或POST
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用，然而，在
以下情况中，必须使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
2、url：文件在服务器上的位置
url 参数是open()方法中唯一一个必须要指定的参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如 .txt 和 .xml，或者服务器脚本文件，如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）
3、 async：true(异步)或false(同步)
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕
说明：async是一个布尔值。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作
注意事项：
open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错
3、如何发送请求
语法：send(string)
功能：将请求发送到服务器
参数说明：string仅用于post请求
注意事项：仅在POST请求时可以传入参数，不需要则发送null，在调用send方法之后请求被发往服务器
get请求格式： xhr.send(null);
post请求格式：
xhr.setRequestHeader("MyHeader","MyValue");//这句在index.php里显示
xhr.send('a=aa&b=bb&c=cc');
4、设置响应HTTP请求状态变化的函数
// 第三步、响应XMLHttpRequest对象状态变化的函数
// 利用onreadystatechange在readyState改变时触发
xhr.onreadystatechange =function(){
// 异步调用成功
if(xhr.readyState==4){
if((xhr.status>=200 && xhr.status <300)||xhr.status == 304){
// 获取返回数据
console.log(xhr.responseText)
}else{
console.log(xhr.status)
}
}
}5、如何添加HTTP头（post请求时）
如果需要像 HTML 表单那样 POST 数据，需使用 setRequestHeader()来添加 HTTP 头，然后在 send() 方法中规定希望发送的数据
语法：xmlhttp.setRequestHeader(header,value)
使用：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")
三、设置响应HTTP请求状态变化的函数
在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充：
responseText——从服务器进程返回数据的字符串形式
responseXML——从服务器进程返回的DOM兼容的文档数据对象
status——从服务器返回的数字代码，如404（未找到）和200（已就绪）
statusText——伴随状态码的字符串信息
四、异步请求响应
onreadystatechange 事件
监听readyState：XMLHttpRequest状态（0~4的值）
0--请求未初始化
1--服务器连接建立
2--请求已接受
3--请求处理中
4--请求已完成，响应已就绪
status：HTTP响应码
200：响应成功
404：未找到页面
回调函数：条件满足后，调用函数，执行响应操作 ，并处理返回的数据
// 第三步、响应XMLHttpRequest对象状态变化的函数
// 利用onreadystatechange在readyState改变时触发(不然会出现异步请求时response为空的情况)
xhr.onreadystatechange =function(){
// 异步调用成功
if(xhr.readyState==4){
if((xhr.status>=200 && xhr.status <300)||xhr.status == 304){
// 第五步、获取返回的数据
console.log(xhr.responseText)
}else{
console.log(xhr.status)
}
}
}完整的请求代码：
<script>
// 封装通用的xhr
function createXHR(){
// 判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，firefox,opera等
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
// 判断IE老版本
}else if(typeof ActiveXObject != 'undefined'){
// 将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr = [
'Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0',
]
// 遍历创建XMLHttpRequest对象
var len=xhrArr.length,xhr
for(var i=0;i<len;i++){
try{
// 创建XMLHttpRequest对象
xhr=new ActiveXObject(xhrArr[i])
break;
}catch(ex){
}
}
return xhr;
}else{
throw new Error('不支持')
}
}
// XMLHttpRequest对象
var xhr= createXHR();
// console.log(xhr)
// 第三步、响应XMLHttpRequest对象状态变化的函数
// 利用onreadystatechange在readyState改变时触发(不然会出现异步请求时response为空的情况)
xhr.onreadystatechange =function(){
// 异步调用成功
if(xhr.readyState==4){
if((xhr.status>=200 && xhr.status <300)||xhr.status == 304){
// 第五步、获取返回的数据
console.log(xhr.responseText)
}else{
console.log(xhr.status)
}
}
}
// 第二步、创建请求
xhr.open('get','index.php',true);
// 第四步、设置头部信息
xhr.setRequestHeader("MyHeader","MyValue");//这句在index.php里显示
// 发送请求
xhr.send(null);
</script>$.ajax
var $ = {
ajax:function(options){
var xhr = null, // XMLHttpRequest对象
url = options.url, // url地址
method = options.method || 'get', // 传输方式，默认为get
async = typeof(options.async) === "undefined"?true:options.async,
data = options.data || null, // 参数
params = '',
callback = options.success, // ajax请求成功的回调函数
error = options.error;
// 将data的对象字面量的形式转换为字符串形式
if(data){
for(var i in data){
params += i + '=' + data[i] + '&';
}
params = params.replace(/&$/,"");
}
// 根据method的值改变url
if(method === "get"){
url += '?'+params;
}
if(typeof XMLHttpRequest != "undefined"){
xhr = new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
// 将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
// 遍历创建XMLHttpRequest对象
var len = xhrArr.length;
for(var i = 0;i<len;i++){
try{
// 创建XMLHttpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
break;
}
catch(ex){
}
}
}else{
throw new Error('No XHR object availabel.');
}
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status >=200 && xhr.status <300) || xhr.status === 304){
callback && callback(JSON.parse(xhr.responseText))
}else{
error && error();
}
}
}
// 创建发送请求
xhr.open(method,url,async);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(params);
},
jsonp:function(){
// 跨域
}
}
