ajax具体实现学习记录

小鱼儿 2021-10-30 03:06 312阅读 0赞

# 记录自己对ajax\\的理解， #

首先要明白ajax是为了解决什么问题，简单来讲就是为了局部刷新页面，而不刷新整个界面。就比如现在有一个实时热度的显示，它是不断变化的，所以你肯定要不停的从数据库当中获取热度，进行显示，但是又只是更新热度，没有必要更新整个界面。这时候就用到了ajax，不断的向服务器发送请求，获取热度，之后使用js更新指定元素。那js是怎样更新的呢？

昂，其实直接用jquery就可以了，不过还是学习ajax肯定要对它具体是怎么实现的学习一下呀~

ajax用了 XMLHttpRequest，js，css，dom,xml等技术来实现，说下其中两个：

XMLHttpRequest：js里面的一个对象，能够进行连接服务器，发送请求等操作，可以理解为一个载体，我们所有的操作最终都是由他执行的。

xml：一种语言，其实跟html撒的差不多，只不过它是用来描述结构化数据的的格式，相当于就是存储交换的数据的一种格式，可扩展性更强一些，有它独特的数据结构格式。

下面来看看他的具体步骤吧：分为以下：

1.构建XMLHttpRequest对象

2.设置回调函数

3.和服务器创建连接

4.发送请求

## 1.构建XMLHttpRequest对象 ##

这一步需要注意的就是ie浏览器和其他浏览器的创建方式的不同，普通浏览器直接创建该对象，而ie浏览器创建ActiveObject对象，并设置响应的参数，代码如下， 很容易理解

if(window.XMLHttpRequest){    //非Ie浏览器
            this.req = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            this.req = new ActiveXObject("Microsoft.XMlHTTP");
        }

![点击并拖拽以移动][Image 1]

，创建结束之后，我们就需要调用该对象的方法来完成异步请求了，我们会用到它的open和send方法，

open("method","url",【asyncFlag】,【username】,【password】);

method:请求的方式，get或者post

后面三个为可选参数，asynvFlag 表示是否异步请求，一般是true

send(params);

将当前连接中的请求发送给服务器，异步的直接返回，同步的话等待响应结束再返回，params是参数，post请求时候用的，另外注意，发送post请求时，要使用 setRequestHeader("Content-Type","application/x-www-form-urlencoded");设置请求头参数

还有他的4个属性：

readyState: 请求的状态，从0-4 依次表示：未初始化，加载中，加载完毕，交互中，完成

status: 服务器返回的Http状态码，

responseText，responseXML：服务器返回的内容，xml格式或者字符串格式的，json也可以返回

## 2.指定回调函数： ##

回调函数，顾名思义，就是服务器处理完请求之后执行的函数，相当于具体的业务逻辑函数。

XMLHttpRequest.onreadystatechange = 函数名;

这里注意一点：如果是该函数有参数，这样写：

..... = function()\{ 函数名(params)\};

## 3.建立与服务器的连接 ##

使用open()函数就行，url就是你请求的服务器地址

## 4.发送请求， ##