ajax

最新推荐文章于 2024-06-20 09:53:57 发布

henulqr

最新推荐文章于 2024-06-20 09:53:57 发布

阅读量226

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42097814/article/details/106038751

版权

一、什么是Ajax

Ajax (Asynchronous javascript and xml) 交互式网页应用开发技术，通过javascript的异步通信，从服务器获取XML文档（或者JSON文档）提取数据，再更新当前网页对应的部分，而不用刷新整个网页

二、基本概念

服务器端（后端）：

服务器端语言：php node java python ruby Go

数据库：mysql mongodb sqllite

浏览器端（前端）：

HTML CSS Javascript H5 IOS Android pc网页

前后端链接所用的协议：

HTTP协议

XMLHttpRequest对象

TCP

UDP

ps:环信融云（即时聊天开发）

三、获取Ajax的步骤

(1) 创建XMLHttpRequest对象，也就是创建一个异步调用对象

var xhr = new XMLHttpRequest();

(2) 创建一个新的HTTP请求，并指定该HTTP请求的方法（post/get) 、URL及验证信息

xhr.open('post','baseURL',true);   //验证信息true可以省略
或者
xhr.open('get','baseURL',true);

设置头信息，让数据以不同的格式（content-type)传递给服务器

//告诉浏览器信息格式为form  ---  x-www-form-urlencoded

xhr.serRequestHeader("content-type","application/x-wwww-form-urlencoded"）

//浏览器信息主体是序列化的JSON字符串
application/json

//XML格式个数据
text/xml

(3) 发送请求：具体要传什么数据告诉server

//有参数的传递(“ ”里面的为后端给的接口参数名）
xhr.send(" "username=" + UserName+ "&pwd=" + password ");
//无参传递
xhr.send();

(4) 设置状态监听函数

xhr.onreadystatechange = function () {
    if(xhr.readyState==4 && xhr.status == 200)
    {
        var res = JSON.parse(xhr.responseText);    //json解析完成后res为一个对象
        var str  = res.data;
        if(str=="登录成功")
        {

            window.location.href  = "DrpletService.html";
        }
        else
        {
            alert(str);
        }
    }
}








//readyState==4表示请求已经完成 xhr.status == 200表示数据已成功返回

我对 ajax 的理解是，它是一种异步通信的方法，通过直接由 js 脚本向服务器发起 http 通信，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一种方法。创建一个 ajax 有这样几个步骤:
首先是创建一个 XMLHttpRequest 对象。

然后在这个对象上使用 open 方法创建一个 http 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。

在发起请求前，我们可以为这个对象添加一些信息和监听函数。比如说我们可以通过 setRequestHeader 方法来为请求添加头信息。我们还可以为这个对象添加一个状态监听函数。

一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发on readystatechange 事件，我们可以通过设置监听函数，来处理请求成功后的结果。

当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候我们可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候我们就可以通过 response 中的数据来对页面进行更新了。
当对象的属性和监听函数设置完成后，后我们调用 sent 方法来向服务器发起请求，可以传入参数作为发送的数据体。