似朝阳似晨星 前言
ajax相当于异步 JavaScript和 XMLajax并不是一种全新的技术，而是由JavaScript、XML、CSS等几种现有技术整合而成。ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
执行流程
用户界面触发事件调用 JavaScript，通过 ajax引擎——XMLHttpRequest对象异步发送请求到服务器，服务器返回 XML、JSON或者 HTML等格式的数据，然后利用返回的数据使用 DOM和 CSS技术局部更新用户界面
通过上图可以发现，ajax的关键元素包括以下部分
- JavaScript语言：
ajax技术的主要开发语言 - XML/JSON/HTML等：用来封装请求或响应的数据格式
- DOM(文档对象模型)：通过
DOM属性或方法修改页面元素，实现页面局部刷新 - CSS：改变样式，美化页面效果
- ajax引擎：即
XMLHttpRequest对象，以同步方式在客户端与服务端之间传递数据
XMLHttpRequest
XMLHttpRequest对象可以在刷新当前页面的情况下向服务端发送异步请求，并接收服务端响应的结果，从而实现局部刷新当前页面的功能。尽管名为 XMLHttpRequest，但他并不限于和 XML文档一起使用，他还可以接收 JSON或者 HTML等格式的文档数据
创建XMLHttpRequest对象
语法：
老版本IE(IE5和IE6)
let request = new ActiveXObject("Microsoft.XMLHTTP");现代版
let request = new XMLHttpRequest();XMLHttpRequest对象常用属性和方法
| 方法名称 | 说明 |
|---|---|
| open(method，url，async) | 1.建立与服务器的链接 2.参数 method：设置HTTP请求方式，如 POST、GET等，对大小写不敏感3.参数 url：请求 URL地址4.参数 async：可选，指定此请求是否为异步方法，默认为 true |
| send(data) | 1.发送请求到服务端 2.参数 data：字符串类型，通过此请求发送的数据。此参数值取决于 open方法中的 method值为"POST"，就可以指定该参数。如果 method值为"GET"，参数为 null |
| abort() | 取消当前请求 |
| setRequestHeader(header,value) | 1.单独设置请求的某个HTTP头信息 2.参数 header：指定的 HTTP头名称3.参数 value：指定的 HTTP头名称所对应的值 |
| getResponseHeader(header) | 1.从响应中获取指定的 HTTP头信息2.参数header：要获取的指定 HTTP头 |
| getAllResponseHeaders() | 获取响应的所有 HTTP头信息 |
| 参数名称 | 说明 |
|---|---|
| onreadystatechange | 设置回调函数 |
| readyState | 返回请求的当前状态 常用值： 0：未初始化 1：开始发送请求 2.请求发送完成 3.开始读取响应 4.读取响应结束 |
| status | 返回当前请求的HTTP状态码 常用值： 200：正确返回 404：找不到访问对象 |
| statusText | 返回当前请求的响应状态 |
| responseText | 以文本形式获取响应值 |
| responseXML | 以 XML形式获取响应值，并且解析成 DOM对象返回 |
1 条评论