如何理解JS的异步ajax，涉及哪些知识-群英

上一篇：用HTML与JS实现监控切屏的操作是什么下一篇：JS写一个仿淘宝的固定侧边栏的代码是什么

这篇文章我们来了解“如何理解JS的异步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', file, async);
                //将请求发送到服务器，参数仅仅用于POST
                request.send(null);
                //每当 readyState 属性改变时，调用的函数
                request.onreadystatechange = function() {
                    /*
						 * readyState 可能的值
						 * 
						 * 0 － （未初始化）还没有调用send()方法
						 * 1 － （载入）已调用send()方法，正在发送请求
						 * 2 － （载入完成）send()方法执行完成，刚刚接收到全部响应内容
						 * 3 － （交互）正在解析响应内容
						 * 4 － （完成）响应内容解析完成
						 */
                    if(request.readyState == 4 && request.status == 200) {
                        /*
							 * 可能的响应类型
							 * responseText - 获得字符串形式的响应数据
							 * responseXML - 获得 XML 形式的响应数据。
							 */
                        callback(JSON.parse(request.responseText));
                    }
                };
            }
        }
        load('weather.json', true, function(text) {
            document.body.innerText = '当前气温：' + text.data.wendu + '°';
        });
    </script>
</html>

weather.json

{
    "status": 200,
    "data": {
        "wendu": "29",
        "ganmao": "各项气象条件适宜，发生感冒机率较低。但请避免长期处于空调房间中，以防感冒。",
        "forecast": [
            {
                "fengxiang": "南风",
                "fengli": "3-4级",
                "high": "高温 32℃",
                "type": "多云",
                "low": "低温 17℃",
                "date": "16日星期二"
            },
            {
                "fengxiang": "南风",
                "fengli": "微风级",
                "high": "高温 34℃",
                "type": "晴",
                "low": "低温 19℃",
                "date": "17日星期三"
            },
            {
                "fengxiang": "南风",
                "fengli": "微风级",
                "high": "高温 35℃",
                "type": "晴",
                "low": "低温 22℃",
                "date": "18日星期四"
            },
            {
                "fengxiang": "南风",
                "fengli": "微风级",
                "high": "高温 35℃",
                "type": "多云",
                "low": "低温 22℃",
                "date": "19日星期五"
            },
            {
                "fengxiang": "南风",
                "fengli": "3-4级",
                "high": "高温 34℃",
                "type": "晴",
                "low": "低温 21℃",
                "date": "20日星期六"
            }
        ],
        "yesterday": {
            "fl": "微风",
            "fx": "南风",
            "high": "高温 28℃",
            "type": "晴",
            "low": "低温 15℃",
            "date": "15日星期一"
        },
        "aqi": "72",
        "city": "北京"
    },
    "message": "OK"
}

效果展示

XML

XML 指可扩展标记语言（eXtensible Markup Language）。XML 被设计用来传输和存储数据。

XML 语法规则

XML 元素名和HTML不一样，没有固定的单词，需要自定义。
XML 必须包含根元素，它是所有其他元素的父元素，根元素标签名自定义。
XML 所有的元素都必须有一个关闭标签
XML 标签必须正确嵌套
XML 属性值必须加引号
XML 标签对大小写敏感。标签 <Letter> 与标签 <letter> 是不同的

XML 声明文件的可选部分，如果存在需要放在文档的第一行，如下所示：

<?xml version="1.0" encoding="utf-8"?>

如：

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="CHILDREN">
        <title>Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="WEB">
        <title>Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

XML 解析

下面的代码片段把 XML 字符串解析到 XML DOM 对象中

案例02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		txt = '<bookstore>'+
				    '<book category="CHILDREN">'+
				        '<title>Harry Potter</title>'+
				        '<author>J K. Rowling</author>'+
				        '<year>2005</year>'+
				        '<price>29.99</price>'+
				    '</book>'+
				    '<book category="WEB">'+
				        '<title>Learning XML</title>'+
				        '<author>Erik T. Ray</author>'+
				        '<year>2003</year>'+
				        '<price>39.95</price>'+
				    '</book>'+
				'</bookstore>';
				
		if(window.DOMParser) {
			parser = new DOMParser();
			xmlDoc = parser.parseFromString(txt, "text/xml");
		} else {// Internet Explorer
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async = false;
			xmlDoc.loadXML(txt);
		}
		// xmlDoc 等价于 document
		xmlDoc.querySelectorAll('book').forEach(function(e,i){
			document.write(e.innerHTML);
			console.log(e.children)
		})
	</script>
</html>

效果展示

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)。JSON 是存储和交换文本信息(传输)的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
Null

如：

var json = {
    'array':[1,'你好',true],
    'number':123,
    'string':'hello',
    'boolean':true,
    'object':{
        'name':'张三',
        'pswd':123456
    }
}

JSON 文件

JSON 文件的文件类型是 “.json”
JSON 文本的 MIME 类型是 “application/json”

JSON 对象

可以使用点号（.）来访问对象的值，也可以使用中括号（[]）来访问对象的值

案例03：获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var json = {
			'array':[1,'你好',true],
			'number':123,
			'string':'hello',
			'boolean':true,
			'object':{
				'name':'张三',
				'pswd':123456
			}
		}
		document.write(json.string);
		document.write(json['number']);
	</script>
</html>

效果展示

案例04：删除对象属性

可以使用 delete 关键字来删除 JSON 对象的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var json = {
			'array': [1, '你好', true],
			'number': 123,
			'string': 'hello',
			'boolean': true,
			'object': {
				'name': '张三',
				'pswd': 123456
			}
		}
		delete json.array;
		delete json['object'];
		for(i in json) {
			document.write(json[i]);
		}
	</script>
</html>

效果展示

JSON文件读取

var request = null;
if(window.XMLHttpRequest) {
	request = new XMLHttpRequest();
} else if(window.ActiveXObject) {
	request = new window.ActiveXObject();
} else {
	request("您的浏览器版本过低");
}
if(request != null) {
	request.open(method, file, true);
	request.send(null);
	request.onreadystatechange = function() {
		if(request.readyState == 4 && request.status == 200) {
			//console.log(request.responseText)
			callback(JSON.parse(request.responseText));
		}
	};
}

JSON解析

JSON.parse()：JSON字符串转JavaScript 对象

JSON.parse(text[, function])

参数说明：

text:必需，一个有效的 JSON 字符串。
function(key,value): 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

案例05

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var json = '{"number":123,"string":"hello","boolean":true}';
		var obj = JSON.parse(json,function(key,value){
			if (key == "number") {
				return 789;
			}
			return value;//这句不能少，处理不满足if的情况的其他数据
		});
		document.write(obj.number);
		document.write(obj['string']);
	</script>
</html>

效果展示

JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

服务端JSONP格式数据

如客户想访问 : http://www.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。假设客户期望返回JSON数据：["customername1","customername2"]。真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为：

header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";

客户端实现 callbackFunction 函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSONP 实例</title>
	</head>
	<body>
		<div id="divCustomers"></div>
		<script type="text/javascript">
			function callbackFunction(result, methodName) {
				var html = '<ul>';
				for(var i = 0; i < result.length; i++) {
					html += '<li>' + result[i] + '</li>';
				}
				html += '</ul>';
				document.getElementById('divCustomers').innerHTML = html;
			}
		</script>
		<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
	</body>
</html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<html>
	<head>
		<meta charset="utf-8">
		<title>JSONP 实例</title>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
	</head>
	<body>
		<div id="divCustomers"></div>
	</body>
    <script>
        $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
            var html = '<ul>';
            for(var i = 0; i < data.length; i++) {
                html += '<li>' + data[i] + '</li>';
            }
            html += '</ul>';
            $('#divCustomers').html(html);
        });
    </script>
</html>