一个完整的HTTP请求过程,通常有下面7个步骤
Web服务器- 关闭TCP连接
如何配置自己的服务器程序(AMP)
Ajax必须在服务器环境下才能正常使用
什么是Ajax?
同步: 客户端发起请求–等待–>服务器端处理—等待–>响应–>页面载入 (请求错误时全部重新载入).
异步: 客户端发起请求—>服务器端处理—>响应—>页面载入(填写时,即时更新,部分返回).
GET
还是POST
请求GET | POST |
---|---|
用于信息获取/查询(如:浏览帖子) | 用于修改服务器上的资源(如:用户注册) |
安全性低(使用url 传递参数所有人可见) |
安全性一般(至少不可见) |
容量低(2000个字符) | 容量几乎无限 |
状态码 | 描述 | 原因短语 |
---|---|---|
200 | 请求成功.一般用于GET和POST方法 | OK |
301 | 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL | Moved Permanently |
304 | 未修改.所请求资源未修改读取缓存数据 | Not Modified |
400 | 请求语法错误,服务器无法理解 | Bad Request |
404 | 未找到资源,可以设置个性”404页面” | Not Found |
500 | 服务器内部错误 | internal Server Error |
类比打电话理解Ajax编写步骤
打电话 | ajax请求 |
---|---|
1.打电话 | 1.创建Ajax对象 |
2.拨号 | 2.连接服务器 |
3.建立连接 | 3.发送请求 |
4.听 | 4.接受返回 |
ActiveXObject("Microsoft.XMLHTTP")
;//IE6已死,可以不考虑了XMLHttpRequest()
; 例:var request = new XMLHttpRequest();
open(method,url,async);
例: request.open("GET","get.json",true);
send(string)
GET
方式请求时无需填写参数POST
方式时参数代表着向服务器发送的数据
1
|
//完整的GET请求
|
属性 | 值 |
---|---|
responseText |
获得字符串形式的响应数据 |
responseXML |
获得XML形式的响应数据 |
status 和statusText |
以数字和文本方式返回HTTP状态码 |
getAllResponseHeader() |
获取所有的响应报头 |
getResponseheader() |
查询响应中的某个字段的值 |
onreadystatechange
事件
通过监听
onreadystatechange
事件,来判断请求的状态.
readyState
属性:响应返回所处状态
状态码 | 状态 | 所处位置 |
---|---|---|
0 | (未初始化) | 还没有调用open() 方法 |
1 | (载入) | 已调用send() 方法,正在发送请求 |
2 | (载入完成) | send() 方法完成,已经收到全部响应 内容 |
3 | (解析) | 正在解析响应内容 |
4 | (完成) | 响应内容解析完成,可以在客户端调用了 |
例:
1
|
//基本完整的一个Ajax请求
|
1
|
/**
|
注:并不推荐使用
eval
,并不推荐使用eval
,并不推荐使用eval
。因为eval解析数据时会有一系列问题出现。这里是因为只是学习就随意点了。
在需要解析请求数据时,推荐使用JSON的方法JSON.parse()
可以将一个 JSON 字符串解析成为一个 JavaScript 值。参考MDN-JSON
eval
的使用
1
|
var str = "54-8*6+4";
|
一次成功的get请求
1
|
//已经引入get函数
|
DOM
创建元素
for
循环.From:http://guowenfh.github.io/2015/12/18/Ajax-elementary-course-1/
原文:http://www.cnblogs.com/autismtune/p/5212407.html