3-初识Ajax

在ajax中，form表单就没有必要写action了
采用ajax表单元素也没有必要有name属性
提交按钮也不一定是submit了，可以是普通的button

使用Ajax四重奏

第一步、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();//标准浏览器
var xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE6

第二步、准备发送
参数一：请求方式（get获取数据；post提交数据）
参数二：请求地址
参数三：同步或者异步标志位，默认是true表示异步，false表示同步（如果是同步的话不会调用第四步的回调函数，直接返回数据：xhr.responseText）
xhr.open();

（1）如果是get请求那么请求参数必须在url中传递
encodeURI()用来对中文参数进行编码，防止乱码
var param = 'username='+uname+'&password='+pw;
xhr.open('get','03get.php?'+encodeURI(param),true);

（2）post请求参数通过send（第三步）传递，不需要通过encodeURI()转码
必须设置请求头信息
var param = 'username='+uname+'&password='+pw;
xhr.open('post','04post.php',false);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); -- 头信息
（这里要使用到第三步）第三步：xhr.send(param);//post请求参数在这里传递，并且不需要转码

（3）如果是get请求： xhr.send(null);
如果是post请求：xhr.send(post请求参数);

（4）指定回调函数
该函数调用的条件就是readyState状态发生变化（不包括从0变为1），所以状态变为2，3，4时会各调一次该函数，调用三次

xhr.onreadystatechange = function(){
----------------------------------------
  readyState一共有五个值：
  readyState=0表示xhr对象创建完成
  readyState=1表示已经发送了请求
  readyState= 2 浏览器已经收到了服务器响应的数据
  readyState=3 正在解析数据
  readyState=4 数据已经解析完成，可以使用了
------------------------

    if(xhr.readyState == 4){
       4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的
------------------------------
        http的常见状态码
        200表示响应成功
        404没有找到请求的资源
        500服务器端错误
--------------------------------
        if(xhr.status == 200){
            这里的200表示数据是正常的
            alert(xhr.responseText);
        }
    }
}

使用jquery中的封装好的ajax方法

$.ajax({
    url: "ex8.php",
    data: {}, -->参数
    dataType: 'json',  -->数据类型
    type: 'post',    -->提交方式
    //成功返回并数据正常时执行的函数
    success: function  (data) {
    },
    //服务端错误时执行的函数
    error: function (data) { 
    }
});

模拟jquery包装ajax类

function ajax(url, param, type, dataType, callback) {
    var xhr = null;
    // 处理兼容性
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('MicroSoft.XMLHTTP');
    }

    // 2.准备发送
    if (type === 'get') {
        url += '?' + param;
    }
    xhr.open(type, url, true);

    // 3.执行发送动作
    var data = null;
    if (type === 'post') {
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        data = param;
    }
    xhr.send(data);

    // 4.指定回调函数
    xhr.onreadystatechange = function () {
        // 判断是否接收成功
        if (xhr.readyState === 4) {
            // 判断数据是否正常
            if (xhr.status === 200) {
                var data = xhr.responseText;
                // 如果类型是json形式，需要将数据转成json格式
                if (dataType === 'json') {  
                    data = JSON.parse(data);
                }
                callback(data);
            }
        }
    }
}