ajax之旅

学习ajax之前，我们要知道ajax是什么：

Ajax 是一种用于创建快速动态网页的技术。

第一个知识点：

http的请求过程：

1.建立tcp网络连接

2.客户端：发送请求头+请求体

3.服务端：返回响应头+响应体

4.断开tcp网络连接

5.浏览器渲染响应体

第二个知识点：

请求组成部分：

1.请求行 ：又分为请求方法和Http协议版本

2.请求头

3.空行

4.请求体

响应组成：

1.状态行

状态行由分为http协议版本号、状态码、状态消息

常见的状态码
200	请求成功
307	临时
404	找不到
402	没有权限
505	服务器错误

2.响应头

3.空行

4.响应体

第三个知识点：

ajax的步骤：

01：创建  var xhr=new XMLHttpRequest（）

02：打开  xhr.open（'POST',url）

03：设置请求头：xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');       xhr.send(data)

04：监听  xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){xhr.responseText}}

第四个知识点：

json：

1.字符串转js  JSON.parse（str）
2.js对象转json字符串  JSON.stringify（obj）
3.json字符串是JavaScript对象格式表示的一种字符串（本质就是字符串）
4.{“key”：“value”} key必须双引号包裹  value值：布尔，null，undefined，string，Number，Array，Object（没有函数）

第五个知识点：

文件上传：

1.获取文件  var file=document.getelementByid（xxx）. files[0]  var form=new FormData();  form.append("file",file);
2. ajax   xhr  =new XMLHttpRequest(); xhr.open("POST",url)  xhr.send(form); xhr.onreadystatechange=function(){}

第六个知识点：

xhr对象：

1.readystate （准备状态）

0	未初始化
1	未发送
2	未响应
3	部分响应
4	响应完成

2.responseText 响应的文本

3.status  状态码：200成功

4.onreadystatechange   监听状态变化

第七个知识点：

请求方法：

1.POST 

2.GET

POST和GET区别
POST	GET
修改增加服务器数据	通常向服务器获取数据
请求参数在地址栏不可见	在地址显示请求参数
不会缓存，不可以收藏书签	get可以缓存，可以收藏书签
理论向服务器传输数据没有限制	get最多向服务器传参2k（2048个字）

4.delete 删除3.put 添加

5.head 只发请求头

6.options 选项

7.trace 回显

8.connect 管道

第八个知识点：

1.jq中ajax底层都来自$.ajax（）分三层

2.顶

顶层
.load（url）	把加载的内容放入jq节点中
$.getscript(url)	动态加载javascript并执行
$.getJSON(url) .then(function(res){ })	加载json数据 res就是动态加载json内容

3.中

中层
$.get(url) .then(function(red){})	url请求的地址
$.post(url,data) .then(function(res){})	data请求的数据

4.基

$.ajax({
 url:''请求的地址'',
data:请求的数据
method:''请求方法,post,get'',
success:成功请求的回调函数,
error:失败请求回调,
complete:成功和失败都请求回调
})
.then(function(res){
成功后的回调
})
.catch(function(){
失败的回调
})