前端基础-Ajax对象

前端基础-Ajax对象

第2章 Ajax对象2.1 获取对象通过上一节我们发现,想要使用 ajax 的一系列功能,我们就必须先得到 ajax 对象

基于 W3C标准 浏览器:

代码语言:javascript复制var xhr = new XMLHttpRequest();基于IE内核的浏览器:

代码语言:javascript复制var xhr = new ActiveXObject('Microsoft.XMLHTTP');代码语言:javascript复制浏览器标准不一样,得到的对象也不一样,我们也不知道客户使用什么样的浏览器,因此,我们需要解决兼容性问题;

修改上述代码并测试,具有兼容性:

代码语言:javascript复制再次对代码进行修改 兼容代码封装进函数调用

代码语言:javascript复制将函数写入单独的文件,共其他地方引入调用

创建createXHR.js

将函数复制到文件 createXHR.js 内并保存, 如图:

使用:

代码语言:javascript复制//文件引入

顺便封装一个方法:

使用id属性获取DOM对象,方便后面使用

代码语言:javascript复制function gid(id){

return document.getElementById(id);

}2.2 ajax对象的属性、方法 *火狐开发者文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

2.2.1 属性 **readyState: Ajax状态码 * **

0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法

1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法

2:已调用send方法进行请求

3:正在接收数据(接收到一部分),客户端已经接收到了一部分返回的数据

**4:接收完成,客户端已经接收到了所有数据 * **

status :http响应状态码

200代表成功获取服务器端数据

404未找到页面等等……

statusText :http响应状态文本

responseText:如果服务器端返回字符串,使用responseText进行接收

responseXML :如果服务器端返回XML数据,使用responseXML进行接收

onreadystatechange:当 readyState 状态码发生改变时所触发的回调函数

2.2.2 方法 open(method,url,[aycs]):初始化Ajax对象 (打开)

method:http请求方式,get/post

url:请求的服务器地址

aycs:同步与异步

setRequestHeader(header,value):设置请求头信息

header :请求头名称

value :请求头的值

xhr.getAllResponseHeaders() 获取全部响应头信息

xhr.getResponseHeader(‘key’) 获取指定头信息

send([content]) :发送Ajax请求

content : 如果是get请求时,此参数为null;

如果是post请求时,此参数就是要传递的数据

注意: 所有相关的事件绑定必须在调用send()方法之前进行.

2.2.3 同步与异步例如,小明去餐馆排队点餐,前台服务员将小明的菜单告诉厨师进行制作,此时小明后面排队的人就一直等着,

直到厨师制作完成,把饭菜送到小明手里后离开,后面的人才能继续点餐;这就是同步处理

但是,如果前台服务员将小明的菜单告诉厨师后,服务员发给小明一个好牌去旁边等待,后面的人继续点餐,

厨师将小明的饭菜做好后,随时呼唤小明就餐;这就是异步处理

服务器的不同做法,就代表着 Ajax 的同步或异步处理;

小明就是客户端;

厨师就是后台服务器;

图示:

前台代码:

代码语言:javascript复制

相关推荐

这些评判发质好坏的标准你都知道吗?
office365账号永久激活

这些评判发质好坏的标准你都知道吗?

📅 08-15 👁️ 7893
八喜壁挂炉使用新手指南
office365账号永久激活

八喜壁挂炉使用新手指南

📅 07-02 👁️ 2082
官居几品破解版下载:体验古代仕途升官之路
365bet篮球规则

官居几品破解版下载:体验古代仕途升官之路

📅 11-09 👁️ 4107