JavaScript异步ajax
一级目录
二级目录
三级目录
- 掌握HTTP协议和规则
- 掌握HTTP请求和响应的规则
重点
- 了解HTTP响应头信息
- 了解HTTP状态码
- 掌握AJAX开发中使用的全过程
重点
- 掌握JavaScript JSON的数据结构和使用方法
重点
- 掌握JavaScript XML数据结构和使用方法
- 掌握AJAX获取JSON格式数据的方法
- 掌握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'