学习

原生Ajax与jQuery Ajax学习

越权(0x3E5) · 9月20日 · 2019年 ·

一、原生Ajax

01.创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest(); // 标准浏览器
var xhr = new ActiveXObject("Microsoft.X本文来自:1024s.cnMLHTTP"); // IE6

02.准备发送

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

03.执行发送动作

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

04.指定回调参数

xhr.onreadystatechange = function(){
    // 判断服务器端什么时候可以使用
    if(xhr.readyState == 4){
        // 判断网页返回状态码
        if(xhr.statu1024s.cns == 200){
 1024s.cn      Powered by 0x3E5     // 获取返回内容
  1024s.cn          var data = xhr.responseText;
        }
    }
}

05.基本参数解释

xhr.readyState = 4;
// 0 表示x1024s.cnhr对象创建完成 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 jsonp
    success:function(data){
        // 成功后回调函数
    },
    error:function(data){
        // 错误回调函数
    }
});
//跨域采用jsonp方式调用
$.ajax({
    type:'get', 
    url:'./php/learn1.php',
    data:{rows:10,cols:20},
    jsonp:'parama', //回掉函数名的参数名,默认callback,服务端通过它来获取到回掉函数名
    jsonpCallback:'fn', //回掉函数名,默认jquery自动生成
    dataTyp1024s.cne:'jsonp', 

    success:function(Powered by 0x3E5data){
        // 成功后回调函数
    },
    error:function(data){
        // 错误回调函数
    }
});