原生Ajax简单了解

非洲小朋友(๑°3°๑)

已于 2023-03-20 22:23:59 修改

阅读量38

点赞数

文章标签： javascript 前端 ajax Powered by 金山文档

于 2023-03-20 22:04:15 首次发布

本文链接：https://blog.csdn.net/qq_64266012/article/details/129677548

版权

工作原理

简单来说就是XxlRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM刷新页面。Ajax相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。

特点

Ajax不是一种新的编程语言。使用JavaScript向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，我们的JavaScript可在不重载页面的情况与web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

XMLHttpRequest对象

属性

属性	具体功能
onreadystatechange	用于指定状态改变时所触发的事件处理器
readyState	用于获取请求状态的属性：0-初始化；1-正在加载；2-已加载；3-交互中；4-完成
responseText	用户获取服务器相应属性。当readyState的值为0,1,2时，responseText为空字符串；当readyState的值为3时，responseText为还未完成的响应信息；当readyState的值为4，responseText为响应信息
responseXML	用于当接受到完整的HTTP响应使XML响应，若readyState不为4，它取值为null
status	用于描述HTTP状态代码的属性。仅当readyState值为3或4时，该属性才可用
statusText	用于描述HTTP状态的代码文本。仅当readyState的值为3或4时，该属性才可用

方法

==setRequestHeader():设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用==

原生Ajax步骤

创建XMLHttpRequest对象

var oReq = new XMLHttpRequest();

建立监听，当从服务端获取到响应的时候，调用回调函数，进行数据处理

oReq.addEventListener("load",function(){
    console.log(this.XMLHttpRequest.responseText);
});

设置参数

oReq.open('GET','http://......');

发送请求到服务端

oReq.send();

例如：

var url = "http://1.14.69.117:5000/posts";//要获取数据的地址
      var xhr = new XMLHttpRequest();//创建 XMLHttpRequest 对象
       //建立监听，即为步骤2
       xhr.addEventListener("load", function () {
        if (xhr.status === 200) {//判断服务器是否成功响应
          console.log(this.response);//若成功响应，则打印服务器返回的信息
        } else {
          console.log("error");//若服务器未能成功响应，则抛出错误
        }
      });
      xhr.open("Get", "url", false);//设置发送Ajax请求头的信息，这里就是请求方法 get 和请求地址 URL ，false为是否是以异步发送的方式发送请求，false 同步；TRUE 异步；默认为异步。
      xhr.send();//发送请求

注意：