Vue精彩案例、教程

AJAX的封装和jQuery中的引入

2018-08-07  本文已影响520人  94very

如果只是单纯的使用,我们可以引入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

此文章仅作为个人学习所用,希望对你有所帮助。

上一篇下一篇

猜你喜欢

热点阅读