ajax请求发送/接收/终止:原生js、jQuery、常用状态码

原生js中的Ajax请求

// 1.创建XMLHttpRequest对象,也就是创建一个异步调用对象.
var xmlHttp = new XMLHttpRequest();
// 2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及是否异步请求.
// get方式传参直接拼在url后url?param1=1&param2=2
xmlHttp.open("post", "url", true);
// 3.post请求下需要配置请求头信息
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 4.发送HTTP请求,参数是请求体.post请求如果有参数在send里添加,get就是直接send()
xmlHttp.send("param1=str1&param2=str2");
// 5.设置响应HTTP请求状态变化的函数.
xmlHttp.onreadystatechange = function () {
    // readyState状态
    // 0:请求未初始化
    // 1:服务器已经建立连接
    // 2:请求已经接收
    // 3:请求处理中,返回部分数据
    // 4:请求已经完成,且响应已经就绪,返回全部数据
    if (xmlHttp.readyState == 4)
        // 状态码在200到300之间说明成功,状态码304说明成功返回的是本地的缓存数据
        if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304) {
            // 6.获取异步调用返回的数据
            var data = xmlHttp.responseText;
            // xmlHttp.responseXML是返回的xml
            // 使用JavaScript和DOM实现局部刷新
            document.querySelector(".test").innerHTML = data;
        } else {
            // 失败
        }
}

JQuery中的Ajax请求

$.ajax({
 type:"get",// get或者post
 url:"abc.php",// 请求的url地址
    async: true, // 是否异步请求,默认true
    cache: true, // 是否允许浏览器缓存被请求页面,默认true
	contentType: "", //	发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”。
 data:{},//请求的参数
 dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了 
 timeout:3000,//3秒后提示错误
 beforeSend:function(){ 
 // 发送之前就会进入这个函数
 // return false 这个ajax就停止了不会发 如果没有return false 就会继续
 },
 success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
 },
 error:function(){//失败的函数
 },
 complete:function(){//不管成功还是失败 都会进这个函数
 }
})
$.post({
    url:"abc.php",// 请求的url地址
     data:{},//请求的参数
     dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了 
     timeout:3000,//3秒后提示错误
     beforeSend:function(){ 
     // 发送之前就会进入这个函数
     // return false 这个ajax就停止了不会发 如果没有return false 就会继续
     },
     success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
     },
     error:function(){//失败的函数
     },
     complete:function(){//不管成功还是失败 都会进这个函数
     }
})
$.get({
	url:"abc.php",// 请求的url地址
     data:{},//请求的参数
     dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了 
     timeout:3000,//3秒后提示错误
     beforeSend:function(){ 
     // 发送之前就会进入这个函数
     // return false 这个ajax就停止了不会发 如果没有return false 就会继续
     },
     success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
     },
     error:function(){//失败的函数
     },
     complete:function(){//不管成功还是失败 都会进这个函数
     }
})

参数是param和body的区别

1.Get是相对不安全的,因为在传输过程,数据被放在请求的URL中;Post的数据放在body里,所有操作对用户来说都是不可见的。
2.Get传送的数据量较小,这主要是因为受URL长度限制(各浏览器和服务器的限制不同,目前了解的浏览器最小的是IE是2083个字符,服务器最小的是nginx的默认限制是1k也就是1024字节,request line、通用信息头、请求头域、响应头域的长度总和),之所以限制是因为处理数据时要把数据整体解析出来放到内存里,这需要一大块内存,对于服务器可能造成内存压力;Post传送的数据量较大,一般被默认为不受限制(好像nginx也有body默认限制1M),body里的信息可以读到流里一块一块处理,所以相对没有太大的内存压力。

常用的状态码及含义

/*
1**	信息,服务器收到请求,需要请求者继续执行操作
2**	成功,操作被成功接收并处理
3**	重定向,需要进一步的操作以完成请求
4**	客户端错误,请求包含语法错误或无法完成请求
5**	服务器错误,服务器在处理请求的过程中发生了错误
*/
/*
200: 一切正常(ok)
301: 永久重定向/永久转移
302: 临时重定向/临时转移
304: 没有被修改从缓存中拿数据(not modified)
400: 请求参数错误
401: 无权限访问
403: 禁止访问(forbidden)
404: 找不到页面(not found)
414: 请求参数过长(Request-URI Too Long)
500: 服务器内部错误(internal error)
*/

终止http请求

// XMLHttpRequest有abort方法用于终止HTTP请求,readyState值变为4
// 可以用来防止重复请求:
var request;
if(request != null) {
	request.abort();
} else {
	request = new XMLHttpRequest();
}
©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值