手动编写AJAX过程

AJAX 全称： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

之前在学校没认真学过，只知道ajax就代表局部刷新，能提高效率。

最近一直接触Web方面的项目，遂到网上找了找相关知识，记录一下。

现有理解又多了一下，ajax相当于在客户端和服务器中间又多了一层，打个比方，你去租房，你可以自己去墙上找小广告打电话问房东然后看房，也可以去找中介说明你的要求然后直接给你安排好。ajax就相当于这个中介。在没有这项技术之前，前台需要等待后台完成当前操作后才能响应，这可能会引起应用程序挂起或停止；现在有了异步技术后，将当前请求发送到服务器后，可继续执行其他脚本，当响应就绪后再对响应进行处理。

创建一个AJAX分为大致下列4个步骤

1. 创建XMLHttpRequest对象。
2. 设置请求方式。
3. 调用回调函数。
4. 发送请求。

 

一：创建XMLHttpRequest对象

var xmlHttp;
if(window.XMLHttpRequest)//判断浏览器是否支持XMLHttpRequest对象
{
   xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject)//否则创建ActiveX对象
{
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

在网上百度了下，说IE7.0之前只支持用ActiveXObject对象创建AJAX；其他浏览器则是支持XMLHttpRequest对象的。

二：设置请求方式 

xmlHttp.open("GET","Default.aspx?method=Test",true);

open方法有三个参数，分别是请求方式，请求地址，是否异步。

 

 

请求方式有get和post，地址就是指向你想调用的服务器方法，true代表异步。

三：调用回调函数

客户端向服务器发送请求后，要得知道服务器那边啥时候返回吧，返回什么东西吧，这时候就需要注册个回调函数来取数据，这里要用到onreadystatechange方法

xmlHttp.onreadystatechange = function() {
 if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    alert('返回成功');
                    alert(xmlHttp.responseText);
                }
                else {
                    alert('返回出错');
                }
            }
}

这里参照别人的判断来写的，readyState表示XMLHttpRequest 的状态：从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。

xmlHttp.status掉包服务器返回结果， 200代表服务器那边成功返回。

四：发送请求

var params = "userName='user'&password=123456";//参数            
 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8"); // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);

我们此次用的是Get方法，可以忽略掉第二行，如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。

 

 

结语：

看完了一篇介绍AJAX的文章，写的还不错然后也自己试了一次，一遍跑成功了

文章地址：https://blog.csdn.net/weixin_37580235/article/details/81459282。