二十九、JS原生Ajax请求

最新推荐文章于 2024-07-16 11:07:42 发布

蕙惠子

最新推荐文章于 2024-07-16 11:07:42 发布

阅读量196

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40976555/article/details/80653651

版权

前端专栏收录该内容

53 篇文章 2 订阅

订阅专栏

1.同步，异步区别：

同步：通俗理解代码必须按顺序执行，后面代码必须等待前面代码执行完成才能执行，即当客户端发送请求到服务器端，服务器返回响应之前，客户端都处于等待，卡死状态

异步：前后代码同时执行，后面代码不需等待前面代码执行完成，即客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可随意做其他事情不会被卡死。

2.Ajax概述：Ajax是一种快速创建动态网页的技术。通过后台与服务器进行少量数据交换，Ajax可使网页实现异步更新。即在不重新加载整个网页的情况下，对网页的某部分进行更新。

运行原理：页面发起请求发送给浏览器内核的Ajax引擎，Ajax引擎会提交请求到服务器端，这期间用户可进行任意操作，直到服务器端将数据返回给Ajax引擎，触发设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

3.使用Ajax原因：传统web交互是用户发送一个http请求服务器，服务器收到后作出响应并返回一个新页面给用户，在服务器处理客户端请求时，客户只能等待，且无论请求数据多么简单，都会返回一个完整的HTML页面，这样每次都需浪费时间与带宽读取页面，导致用户界面的响应比本地应用慢得多，而Ajax刚好解决了这个缺点。

4.XMLHttpRequest对象：是Ajax基础，XMLHttpRequest用于在后台与服务器交换数据；即在不重新加载整个网页的情况下，对网页的部分进行更新，目前所有浏览器都支持XHLHttpRequest。

属性：

(1)readyState:Http请求的状态，当一个XMLHttpRequest初次创建时，这个属性的值从0开始，直到接收到完整的HTTP响应，这个值增加到4。

readyState的值不会递减，除非当一个请求在处理过程中的时候调用了abort()或open()方法。酶促这个属性的值增加的时候，都会触发onreadystatechange事件句柄；

(2)responseText:目前为止为服务器接收的响应(不包括头部)，或者如果还没接收到数据的话，就是空字符串。

readyState<3 responseText是一个空字符串；

readyState=3 responseText返回目前已接收的响应部分；

readyState=4 responseText保存完整的响应体；

(3)responseXML：对请求的响应，解析为XML并作为document对象返回。

(4)status:由服务器返回的HTTP状态代码，200表示成功，404表示“Not Found”错误；readyState<3读取这一属性会导致一个异常；

(5)statusText:这个属性用名称而不是数字指定了请求的HTTP的状态代码。

方法：

(1)abort():取消当前响应。关闭连接并且结束任何未决的网络活动。即把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。

(2)getAllResponseHeaders():把HTTP响应头部作为未解析的字符串返回。

(3)getResponseHeader():返回指定的Http响应头部的值，其参数是要返回的HTTP响应头部的名称。如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

(4)open():初始化HTTP请求参数，(URL和HTTP)但不发送请求。

语法：open(method, url, async, username, password)

参数：method用于请求的HTTP方法(get,post,head)

url请求的主体。多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

async指示请求使用应该异步执行(false同步请求true异步请求)

username和password可选参数，为url所需的授权提供认证资格。若指定，它们会覆盖 url 自己指定的任何资格。

(5)send():发送HTTP请求，使用传递给open()方法的参数，以及传递给该方法的可选请求体。

语法：send(body)

如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者 Document 对象

(6)setRequestHeader():向一个打开但未发送的请求设置或添加一个HTTP请求。

语法：setRequestHeader(name, value)

参数：name设置头部名称，不包括空白，冒号或换行

Value是头部的值，不包括换行;

说明：setRequestHeader() 方法指定了一个 HTTP 请求的头部，它应该包含在通过后续 send() 调用而发布的请求中。这个方法只有当 readyState 为 1 的时候才能调用。如open()之后send()之前

事件句柄：onreadystatechange注册事件

5. 使用方法5步

（1）创建XMLHTTPRequest对象 (new XMLHTTLRequest)

（2）使用open方法设置和服务器端交互

（3）设置发送的数据，开始和服务器端交互 send()

（4）注册事件 onreadystatechange

（5）更新界面

6.两种方法请求示例

(1)get请求：

//1.创建服务器交互对象
var ajax=new XMLHttpRequest();
//2.使用open方法设置和服务器端交互 建立连接
ajax.open("get","./data/data.txt",true);//异步
//3.发送请求
ajax.send();
//4.注册事件onreadystatechange状态改变就会被调用
ajax.onreadystatechange=function(){
    if(ajax.readyState==4&&ajax.status==200){
        //5.进入则成功，更新界面
        console.log(ajax.responseText);//输出相应内容
    }
}

(2)post请求

var ajax=new XMLHttpRequest();
ajax.open("post","./data/data.txt",true); //true异步
ajax.send();
ajax.onreadystatechange=function(){
    if(ajax.readyState==4&&ajax.status==200){
        //console.log(ajax.responseText);
    }
};
 console.log(ajax.responseText);//会输出空 前后同时执行

(3)封装两种方式为一个方法

ajax_method("./data/data.txt","post");
/*封装为一个方法*/
function ajax_method(url,method,data){
    var ajax=new XMLHttpRequest();
    //get post方法判断
    if(method=="get"){
        //get请求 ？data方式传值
        ajax.open(method,url);
        if(data){ //若有值
            url+='?';
            url+=data;
        }else{
            ajax.send();
        }
    }else { //post请求
        ajax.open(method,url);
        if(data){ //若有值
            ajax.send(data);
        }else{
            ajax.send();
        }
    }
    ajax.onreadystatechange=function(){
        if(ajax.readyState==4&&ajax.status==200){
            console.log(ajax.responseText);
        }
    }
}