如果只是单纯的使用,我们可以引入jQuery中的AJAX
jQuery中包含有封装的ajax所以,可以直接引入,只许在<head>标签中引入jQuery库
jQuery 安装 | 菜鸟教程中介绍有jQuery的引入
jQuery.ajax([settings])
常用设置
type:类型,POST或GET
url:发送请求的地址
data:连同请求发送到服务器的数据
dataType:预期返回的数据类型,一般采用json
success:请求成功后返回的回调函数,传入返回后的数据,以及包含成功代码的字符串
error:请求失败时调用此函数,传入XMLHttpRequest对象
例子
如果你想深入了解AJAX请看下面
AIAX是基于XMLHttpRequest(XHR) 对象 交换数据的一项技术
不兼容IE6以及更早的版本,珍惜生命,远离IE6。
兼容IE6以及更早的版本
http 计算机通过网络进行通信的规则
无状态的协议(处理过程没有记忆,后续处理需要之前的信息需要重新传递)
(http过程)
建立TCP连接
web浏览器向web服务器发送请求命令
web浏览器发送请求头信息
web服务器应答
web服务器发送应答头信息
web服务器向浏览器发送数据
web服务器关闭TCP连接
(http请求)
type 请求的方法/动作,比如GET或POST请求
url 请求的地址
请求头,客户端环境信息,身份验证信息等
请求体,请求正文,客户端提交的查询字符串信息,表单信息等
(请求类型)
GET 用于信息获取
使用url传递参数
发送信息数量有限制(一般在2000字符以内)
所有人可见
一次传递
POST 用于修改服务器上的资源
对发送的信息数量无限制
对过大的信息会分段发送
(http响应)
状态码,响应头,响应体。
1XX: 收到web请求,正在进一步的处理
2XX: 请求成功
3XX: 请求没有成功,客户必须采取进一步的措施(重定向)
4XX: 客户端提交的请求有误
Found: 请求中所引用的文档不存在
5XX: 服务器不能完成对请求的处理
(将调用请求并发送到服务器)
open(method, url, async) 调用http请求
method 请求方法(GET/POST)等
url 请求地址
async 请求同步还是异步(同步: false 异步: true(默认值))
send(string) 将http请求发送到服务器
string发送的数据
setRequestHeader
应写在open()和send()之间
设置数据格式
json格式数据
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
表单数据
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
纯文本
xhr.setRequestHeader("Content-type", "text/plain; charset=utf-8");
html文本
xhr.setRequestHeader("Content-type", "text/plain; charset=utf-8");
charset=utf-8(编码可带可不带),逗号后面的值对大小写不敏感。
(获取服务器的响应)
responseText:获取字符串形式的响应数据
responseXML:获得XML形式的响应数据
status:以数字形式返回http状态码
statusText:以文本形式返回http状态码
getAllResponseHeader():获取所有的响应报头
getResponseHeader():查询响应中的某个字段的值
(反应服务器响应的状态)
readyState
0:请求未初始化,open还没调用
1:服务器连接建立,open已调用
2:请求已接受,接收到头信息了
3:请求处理中,接收到响应主体
4:请求完成,响应完成(已就绪)
下面是建立一个XHR以及判断服务器响应
下面是对ajax的封装,可以在html页面中引用
get 只含有对数据的命名,没有数据,可见,但对因为只含有命令,没有数据所以安全。
post 向服务器发送主体内容
此文章仅作为个人学习所用,希望对你有所帮助。