ajax的学习

HTTP

http一种无状态的网络协议

http的请求过程

1.简历TCP网络连接（与服务器联通）
2.客户端发送请求头+请求体
3.服务器应答请求头+请求体
4.关闭TCP连接
5.客户端（浏览器）渲染内容

请求头的组成

请求行（请求报头）

• GET请求方法
• / 请求的资源地址
• /HTTP/1.1协议
  请求头信息
• Accept 浏览器接受的类型
• Cookie 会话信息
• User-Agent 浏览器头信息

空行
请求体

响应头的组成

响应行
HTTP/1.1协议
200响应码
ok 状态
响应头信息
Content-Type返回的数据类型
空行
响应体（返回的网页）

请求的方法

参考链接:restFUL
get 获取
post 添加
put 修改
delete 删除
trace 回显
head 只发送头信息
options 选项

响应码

响应码大全
1xx 消息
2xx 成功 200响应成功
3xx 重定向 307临时重定向
4xx 客户端错误 404错误
5xx 服务器错误 500服务器错误

XMLHttpRequst

ajax是一项综合技术，全称Async Javascript And Xml：异步的javascript和XML
核心是使用XMLHttpReqeust与服务器异步交换数据，通过js动态操作dom实现页面无刷新更新视图

同步与异步

javascript默认是从上向下执行代码，上一行执行完毕，下一行开始执行——被称为同步（阻塞式）

异步：非阻塞执行代码
实现方式：
1.事件响应
2.通过回调函数实现异步（setTimeout）
3.Promise

ajax优缺点

优点：
最大的优点：无刷新更新页面视图
异步（不影响别的代码执行）
缺点：
对搜索引擎SEO不友好（内容是通过javascript加载的，百度没办法收录你的内容，百福搜索对应关键字，搜索不到你的网页）

$.get()请求

var xhr = new XMLHttpRequest（）；
xhr.open（"get",'./kongfu.txt'）
xhr.send();
xhr.onreadyStatechange = function(){
   if(xhr.readyState==4){
       if(xhr.status==200){
          console.log(xhr.responseText)
       }
   }
}

//open 打开方法
//send 发送
//onreadyStatechange 监听状态变化
//readyState 有0-4，5个状态，4代表的是服务器响应完成
//status响应码 200代表请求成功
//responseText 服务器响应的文本

$.post()请求

var xhr = new XMLHttpRequest（）；
xhr.open（"get",'http://520mg.com/ajax/echo.php'）
xhr.srtRequesHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('name=wuhu&age=18');
xhr.onreadyStatechange = function(){
   if(xhr.readyState==4){
       if(xhr.status==200){
          console.log(xhr.responseText)
       }
   }
}

Content-Type 内容类型传送门

JQuery中的ajax

.load方法

语法

el.load(url)

解释
把url的内容通过ajax加载到el内部
示例

$(".container").load("./kongfu.txt");

$.get()方法

通过get请求方式，获取内容
语法

$.get(url)
.then(res=>res)
.catch(xhr=>xhr)

.then的前面一行没有分号结尾

示例
向服务器请求一条笑话信息

$get("http:520mg.com/mi/list.php?page-1")
.then(res=>{
   //res就是服务返回的内容
   //.then方法就是请求成功后获取内容的方法
})
.catch(xhr=>{
   //.catch就是请求失败（通常是网络错误）响应方法
   //xhr就是jquery封装的XMLHttpRequest对象
})

$.post()方法

以post方法向服务器发起请求
语法

$.post(url,data)
.then(res=>res)
.catch（xhr=>xhr）


//url 请求的地址
//data 请求体（发送给服务器的数）
//.then 成功响应方法
//.catch 网络失败响应方法
//res 服务器返回的数据 response 响应的简写，是个形参，起任何名字都可以

示例

//$.post("http://520mg.com/ajax/echo.php",'name=芜湖&age=18')
$.post("http://520mg.com/ajax/echo.php",'name=芜湖&age=18')
.then(res=>{
    console.log(res)
})
.catch(xhr=>{
    console.log(xhr)
})

$.ajax()方法

$.ajax()方法是jQuery的底层方法，可以传入定义的参数最多，更加灵活
jQ中的ajax方法是分3层封装的

• 第一层$.ajax()
• 第二层
  $.get()；
  $.post()；
• 第三层
  el.load()加载
  $.getJSON()加载json数据的
  $.getScript()加载并执行js

语法

$.ajax({
url,          //请求的地址
method,       //请求的方法get，post，delete，put
data,         //请求的过程
dataType,     //返回数据列席json，jsonp，text
xhrFields:(withCredentials:true),//用来跨域
succes:function(res){},//成功回调函数res服务器返回的数据 等同于.then
error:function(xhr){},//网络失败的回调函数，等同于catch
})
.then(res=>res)
.catch(xhr=>xhr)

案例

$.ajax({
   url:"https:520mg.com/member/index_login2.php",
   method:"POST",
   data:{dopost:"exit"},         //退出的参数
   datatype:"json",              //返回的数据格式是json
   xhrFields:{withCredentials:true}//跨域
})
.then(res=>{
   alert(res.msg);
})
.catch(err=>console.error(err))

$.ajax的参数

参数名	解释	示例
url	请求的地址	-
method	请求的方法	get，post，put，delete
data	请求的数据	(name:“wuhu”,age:18)
dataType	返回数据的类型	xml，text，json，jsonp
xhrFields	携带请求头信息 (用来跨域)	（withCredentials：ture）
succes	成功回调函数	-
error	失败的回调	-
beforeSend	发送前的回调函数 显示加载提示	-
complete	加载完成回调函数 关闭加载提示	-