原生js与JQuery的ajax请求

原生js的ajax请求

1.创建XMLHttpRequest对象

var xhr=new XMLHttpRequest();

2.准备发送请求 open()

xhr.open('请求类型','url地址',是否异步);

参数	描述
请求类型	GET 或 POST
url	文件在服务器上的地址
是否异步	true(异步) / false(同步)

3.发送请求数据 send()

xhr.send();

4.请求返回的回调函数
当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。

xhr.onreadystatechange=function(){
	if(xhr.readyState==4 && xhr.status==200){
		console.log(xhr.responseText) 
	}
}

readyState状态码

属性	描述
onreadystatechange	存储函数(或函数名)，每当readyState属性改变时就会调用该函数
readyState	存有XMLHttpRequest的状态，从0-4发生变化 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成且响应已就绪
status	200：‘OK’ 404:未找到页面

实例：

get请求：

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(xml.responseText);//输入相应的内容
  　　}
}

post请求：

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

方法封装：

function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);

        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);

        // 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }
}

JQuery的ajax请求

$.ajax()

参数	描述
url	链接地址，字符串表示
data	需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}
type	“POST” 或 “GET”，请求类型
timeout	请求超时时间，单位为毫秒，数值表示
cache	是否缓存请求结果，bool表示
contentType	内容类型，默认为"application/x-www-form-urlencoded"
dataType	服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
success	请求成功后，服务器回调的函数
error	请求失败后，服务器回调的函数
complete	请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
async	是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
username	访问认证请求中携带的用户名，字符串表示
password	返回认证请求中携带的密码，字符串表示

eg：

$.ajax({
    url: "/greet",
    data: {name: 'jenny'},
    type: "POST",
    dataType: "json",
    success: function(data) {
        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
        ...
    }
});

$.post()

参数	描述
url	链接地址
data	需要发送到服务器的数据
function	请求成功后，服务器回调的函数
dataType	服务器返回数据的格式

eg：

$.post(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.get()

参数所示意义与$.post()一致

$.get(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.getJSON()
该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。

$.getJSON(
    "/greet",
    {name: 'jenny'},
    function(data) {
        ...
    }
);

$.load()
该方法将服务器加载的数据直接插入到指定DOM中。

$('#box').load(
    "/greet",
    {name: 'Brad'}
);

$.getScript()
该方法使用GET方式执行Ajax请求，从服务器加载并执行回传的JavaScript。

$.load(url, func);