ajax的应用及相关知识

ajax

1.http
1）概念：客户端与服务器超本文无状态传输协议
2）默认端口：http端口80
https端口443
3）请求方法：
options:测试有哪些方法可以用
get：获取服务信息
post：修改与更新，新增服务器信息
put：新增
delete：删除
head：只返回头信息
trace：回显头信息，用来测试
connect：管道形式连接
4）请求过程：建立tcp连接 客户端发送请求头+请求体 服务器响应请求头+请求体 ，关闭tcp连接 客户端渲染内容
1.客户端发起http请求 建立tcp连接
2.客户端（浏览器）发送请求信息（状态行 请求头 空行 请求体）
3.服务的响应请求信息（状态行 响应头 空行 响应体）
4.客服关闭tcp网络连接
5.客户端（浏览器）渲染内容
2.ajax
1）概念：ajax:异步的javascript and xml
2）原理：通过 XMLHttpRequest 与服务器交换数据；服务数据通过json 或者 xml格式返回；浏览器端通过js+ccs渲染展示数据
3）post中ajax：
1.新建ajax对象
var xhr=new XMLHttpRequest()
2.打开连接
xhr.open(“post”,url,false)
3. 设置头信息(get省略)
xhr.setRequestHeader(‘Content- Type’,‘application/x-www-form-urlencoded’);
4.监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState4&&xhr.status200){}
}
返回的数据 xhr.responseText
5. 发送
xhr.send(“name=mumu&age=18”)
4)jquery中ajax
第一层：$.ajax();第二层：$.get()=>1.回调函数
$.get(url,function(data,status,xhr){})
2…done()
.fail()
.always()
3. .then()
.catch()

$.post(url,data,function(data,status,xhr))
第三层：
$.getJSON()
$.getScript()
load()

5)url组成
1.https:www.520mg.com:443/ajax/echo.php?name=mumu&age=18#cate
2.https 协议
3.www子域名
4.520mg.com 域名
5.:443 端口号
6./ajax/echo.php 路径
7.?name=mumu&age=18 查询条件
8.#cate 哈希值
6)浏览器同源策略
当浏览器去访问服务器资源（ajax） 要求服务器的地址与浏览器同源;协议，域名，子域名，端口号要一致
7)跨域
概念：绕过浏览器的同源策略，请求到数据
请求方式：

1. 服务器响应头信息跨域
   Access-Control-Allow-Origin: *
2. jsonp跨域
3. 服务器代理（开发）
   8）异步 同步
   同步胡阻塞代码执行