JavaScript 异步ajax

一级目录

二级目录

三级目录

1. 掌握HTTP协议和规则
2. 掌握HTTP请求和响应的规则 重点
3. 了解HTTP响应头信息
4. 了解HTTP状态码
5. 掌握AJAX开发中使用的全过程 重点
6. 掌握JavaScript JSON的数据结构和使用方法 重点
7. 掌握JavaScript XML数据结构和使用方法
8. 掌握AJAX获取JSON格式数据的方法
9. 掌握JSON格式转换的方法

HTTP协议

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）

请求消息结构

HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：

• 请求行（request line）
• 请求头部（header）
• 空行
• 请求数据

下面给出了请求报文的一般格式:

GET / HTTP/1.1 
Host: www.csdn.net 
Connection: keep-alive 
Cache-Control: max-age=0 
Upgrade-Insecure-Requests: 1 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 
Referer: https://www.csdn.net/ 
Accept-Encoding: gzip, deflate, sdch, br 
Accept-Language: zh-CN,zh;q=0.8 
Cookie: uuid_tt_dd=-6852503192799459486_20161230; _ga=GA1.2.851452765.1483110024; UE="starzhangkiss@qq.com"; __guid=253029775.837108528115350700.1516453692677.6106

请求方法

方法	描述
GET	请求指定的页面信息，并返回实体主体。数据被包含在URL参数中
POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。
HEAD	类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
PUT	从客户端向服务器传送的数据取代指定的文档的内容。
DELETE	请求服务器删除指定的页面。
CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS	允许客户端查看服务器的性能。
TRACE	回显服务器收到的请求，主要用于测试或诊断。

响应头信息

HTTP/1.1 200 OK

Server: Tengine

Content-Type: text/html

Content-Length: 15154

Connection: keep-alive

Date: Fri, 27 Apr 2018 02:49:12 GMT

X-Powered-By: HHVM/3.11.1

Content-Encoding: gzip

Vary: Accept-Encoding

Via: cache40.l2et2-2[0,200-0,H], cache3.l2et2-2[1,0], cache1.cn548[0,200-0,H], cache4.cn548[1,0] Age: 35292

X-Cache: HIT TCP_HIT dirn:7:245100152 mlen:-1

X-Swift-SaveTime: Fri, 27 Apr 2018 12:24:58 GMT

X-Swift-CacheTime: 86400 Timing-Allow-Origin: *

EagleId: dbee144415248326444025049e

响应字段类型

应答头	说明
Allow	服务器支持的请求方法（如GET、POST等）。
Content-Encoding	文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型。
Content-Length	内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。
Content-Type	文档MIME类型
Date	当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦。
Expires	应该在什么时候认为文档已经过期，从而不再缓存它？
Last-Modified	文档的最后改动时间。
Location	表示客户应当到哪里去提取文档。
Refresh	表示浏览器应该在多少时间之后刷新文档，以秒计。
Server	服务器名字。由Web服务器自己设置。
Set-Cookie	设置和页面关联的Cookie。
WWW-Authenticate	客户应该在Authorization头中提供什么类型的授权信息？

响应状态码

分类	分类描述
1	信息，服务器收到请求，需要请求者继续执行操作（收到信件，还没看）
2	成功，操作被成功接收并处理（收到，并且看过了）
3	重定向，需要进一步的操作以完成请求（转达信息给第三者）
4	客户端错误，请求包含语法错误或无法完成请求（发不出去）
5	服务器错误，服务器在处理请求的过程中发生了错误（对方出错【代码错误】）

详细状态码列表

状态码	中文描述
200	请求成功。一般用于GET与POST请求
201	已创建。成功请求并创建了新的资源
202	已接受。已经接受请求，但未处理完成
204	无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
301	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
400	客户端请求的语法错误，服务器无法理解
401	请求要求用户的身份认证
403	服务器理解请求客户端的请求，但是拒绝执行此请求
404	无法找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
408	服务器等待客户端发送的请求时间过长，超时
411	服务器无法处理客户端发送的不带Content-Length的请求信息
415	服务器无法处理请求附带的媒体格式
500	服务器内部错误，无法完成请求

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript【JSON】 和 XML）。

• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

XMLHttpRequest对象

XMLHttpRequest 是AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

XMLHttpRequest请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法说明

方法	描述
open(method,url,async)	method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
setRequestHeader(header,value)	向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值
send(string)	将请求发送到服务器。string：仅用于 POST 请求

XMLHttpRequest响应

获得来自服务器的响应，使用 XMLHttpRequest 对象的responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

XMLHttpRequest响应状态

readyState 属性存有 XMLHttpRequest 的状态信息。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	0: 请求（未初始化）还没有调用send()方法 1: 请求连接已建立（载入）已调用send()方法，正在发送请求 2: 请求已接收（载入完成）send()方法执行完成，刚刚接收到全部响应内容 3: 请求处理中（交互）正在解析响应内容 4: 请求已完成（完成）响应内容解析完成
status|statusText	200: “OK” 400无法找到资源 404:未找到页面 500：服务器内部错误

xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		getResponseHeader("headerLabel");
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}

案例01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
    <script type="text/javascript">
        function load(file, async, callback) {
    
            var request = null;
            if(window.XMLHttpRequest) {
    
                request = new XMLHttpRequest();
            } else if(window.ActiveXObject) {
    
                request = new window.ActiveXObject();
            } else {
    
                request("您的浏览器版本过低");
            }
            if(request != null) {
    
                //规定请求的类型、URL 以及是否异步处理请求
                request.open('GET'