如果只是单纯的使用，我们可以引入jQuery中的AJAX
jQuery中包含有封装的ajax所以，可以直接引入，只许在<head>标签中引入jQuery库
jQuery 安装 | 菜鸟教程中介绍有jQuery的引入
jQuery.ajax([settings])
常用设置
type：类型，POST或GET
url：发送请求的地址
data：连同请求发送到服务器的数据
dataType：预期返回的数据类型，一般采用json
success：请求成功后返回的回调函数，传入返回后的数据，以及包含成功代码的字符串
error：请求失败时调用此函数，传入XMLHttpRequest对象
例子
image
如果你想深入了解AJAX请看下面
AIAX是基于XMLHttpRequest(XHR) 对象 交换数据的一项技术
image
不兼容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以及判断服务器响应
image
下面是对ajax的封装，可以在html页面中引用
image
image
get 只含有对数据的命名，没有数据，可见，但对因为只含有命令，没有数据所以安全。
post 向服务器发送主体内容
image
此文章仅作为个人学习所用，希望对你有所帮助。
网友评论