Ajax

Ajax简述

1、AJAX= Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法

3、AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

XMLHttpRequest

创建一个XMLHttpRequest对象

var xml=new XMLHttpRequest();

老版本浏览器（IE5和IE6）

var xml=new ActiveXObject('Microsoft.XMLHTTP');

封装兼容性方法

function createXML(){
    if(window.XMLHttpRequest){
        var xml=new XMLHttpRequest();
    }else{
        var xml=new ActiveXObject();
    }
}

发送请求

1、准备阶段

xml.open(method,url,true)

参数一：请求类型（‘GET’或‘POST’）

参数二：文件在服务器上的位置

参数三：true（异步）或false（同步）

2、发送

xml.send()

将请求发送至服务器

注意：当使用‘POST’方法时需要在前面添加请求头

xml.setRequestHeader("content-type","application/x-www-form-urlencoded");

没有请求头会发生跨域拦截

服务器响应

如需获得来自服务器的响应，使用XMLHttpRequest对象下的responseText或responseXML属性

reponseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据

onreadystatechange事件

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState等于4 且状态为 200 时，表示响应已就绪

xml.onreadystatechange=function(){
    if(xml.reayStete==4&&xml.status==200){
        document.body.innerHTML=xml.responseText;
    }
}

Ajax操作方法封装

function ajax(url,obj,func){
    //创建一个xml对象
    var xml=new XMLHttpRequest();
    //把‘？’拼接到传进来的url地址中
    url+='?';
    //遍历对象中传入的请求参数
    for(var i in obj){
        url+=i+'='+obj[i]+'&';
    }
    //请求发送准备阶段
    xml.open('GET',url,true);
    //请求发送
    xml.send();
    //当XMLHttpRequest状态发生改变时触发
    xml.onreadystatechange=function(){
        if(xml.readyState==4&&xml.status==200){
            //使用res接收服务器返回的JSON数据
            var res=xml.responseText;
            func(res);
        }
    }
}