概念:
“Asynchronous Javascript And XML”(异步Javascript和XML),是指一种创建交互式网页应用的网页开发技术。
步骤
初始化,未发送 0 UNSENT
准备数据,连接地址 1 OPENED
返回响应头 2 HEADERS_RECEIVED
接收数据中 3 LOADING
接收数据完毕 4 DONE
知识点
onreadystatechange 事件

onload 事件
readyState 步骤状态
responseText 相应内容
status 状态码
statusText 状态短语
getAllResponseHeaders 响应头信息
优点 :
用于快速创建动态网页
在无需重新加载整个网页的情况下,通过在后台与服务器进行少量数据交换,达到对网页的某部分进行数据更新。
一般拿到数据需要想三件事情 :
1.数据长啥样
2.字段都是什么意思
3.返回的结果是什么样的?打印看一下:ajax.responseText
jQuery中ajax的使用



ajax的交互模型:
1.XMLHttpRequest : 创建ajax对象

2.open : 填写地址

参数:
1.请求的方式:get、post等
2.url : 请求地址
接口: php/get.php
问号后面拼接的user : 就是后台给你请求的字段,字段是后台规定好的。写在地址栏的查询信息,称之为queryString 。
3.是否异步
3.send() : 发送请求
4.onload : 等待
5.ajax.responseText :收到请求
案例1:如果可以注册输入的字体变成红色,不能注册输入的字体变成绿色。
步骤:首先判断后台的code,根据code的不同做出不同的操作。



get和post的区别
1.传输方式:
get : 走地址栏

查看方式:

post : 走服务器

查看方式:

2.大小
get :提交有限制(不同浏览器限制不同)
cpost : 理论上是不限的(后端会去限制大小)
3.post请求时需要额外设置一个头信息

4.应用场景
1.传输大型文件用post,因为get有限制
2.展示性的数据用get,r
2.对于用户的信息,用post,不能用get.
JSON序列化 :
json2.js 就可以兼容低版本浏览器了。
1.JSON.parse() :
可以把json格式的数据转成对象或者数组。
注意 : JSON数据一定要是一个标准格式的。
'{"key": "value"}' : key和value必须是双引号JSON数据转为对象。
如果数据里有function,转不出来。

2.JSON.stringify()
把对象格式数据转成json格式数据。

不标准的格式也可以转:还会帮你转成标准格式的。

补充 : 对象的深拷贝
先把对象转成字符串,再把字符串转成对象,这样就相当于深度拷贝了。如果数据里有function,转不出来。

细节
get:
因为IE浏览器地址栏在识别中文的时候,会把中文转成URI编码格式,这样服务器是不认识的。
解决 : 就把中文转成URI编码格式。
encodeURI:把中文转成URI编码
decodeURI : URI编码转成中文


网友评论