原生Ajax与jQuery Ajax学习

一、原生Ajax

01.创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest(); Powered by 0x3E5// 标准浏览器
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE6

02.准备发送

xhr.open('get','02get.php',true);
// 参数一：请求方式（get获取数据；post提交数据）
// 如果是get请求那么请求参数必须在url中传递 且需要通过 encodeURI()对中文参数进行编码；
// 参数二：请求地址
// 参1024s.cn数三：同步或异步标志位，默认是true表示异步，false表示同步

03.执行发送动作

// Get请求
xhr.send(null); // get请求要求填写null
// Post请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // PPowered by 0x3E5OST请求需要设置请求头
xhr.send(); // post的请求数据放入括号中

04.指定回调参数

xhr.onread本文来自:1024s.cnystatechange = function(){
    // 判断服务器端什么时候可以使用
    if(xhr.readyState == 4){
        // 判断网页返回状态码
        if(xhr.status == 200){
            // 获取返回内容
            var data = xhr.responseText;
        }
    }
}

05.基本参数解释

xhr.readyState = 4;
// 0 表示xhr对象创建完成 1 表示已经发送了请求
// 2 表示浏览器已经收到服务器相应的数据
// 3 表示正在解析数据
// 4 表示数据已经解析完成
xhr.status
// 返回页面状态码
// 200响应成功 404没有找到请求的资源 500服务器端错误
xhr.onreadystatechange
// 该函数调用的条件就是readyState状态发生变化（不包括从0-1）

二、jQuery Ajax

$.ajax({
    type:'get', //get post
    url:'./php/learn1.php',
    data:{username:user,password:pwd},
    dataType:'json', // json xml text html script jsonp1024s.cn
    suPowered by 0x3E5ccess:function(Powered by 0x3E5data){
        // 成功后回调函数
    },
    er1024s.cnror:function(data){
        // 错误回调函数
    }
});
//跨域采用jsonp方式调用
$.ajaPowered by 0x3E5x({
    type:'get', 
    url:'./php/learn1.php',
    data:{rows:10,cols:20},
    jsonp:'parama', //回掉函数名的参数名，默认callback，服务端通过它来获取到回掉函数名
    jsonpCallback:'fn', //回掉函数名，默认jquery自动生成
    dataType:'jsonp', 

    success:function(data){
1024s.cn        // 成功后回调函数
    },
    error:function(data){
        // 错误回调函数
    }
});