ajax个人总结
一、 ajax概念
Ajax 全称为：“Asynchronous [e’sɪŋkrənəs] JavaScript and XML”
是 异步 JavaScript 和 XML。
可以无刷新状态更新页面。
二、HTTP
1、HTTP概念
http是计算网络通信的规则
htpp 默认接口80
https 默认接口443
HTTP是一种无状态协议（不建议持久连接）
无状态：是指协议对于事务处理没有记忆能力
2、HTTP的7个请求步骤
域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求，浏览器得到html代码 –> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –> 浏览器对页面进行渲染呈现给用户
3、HTTP的状态码
状态码
1xx：信息响应类，表示接收到请求并且继续处理
200（成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
200 GET 请求成功
201 POST请求成功
204 只返回请求头
3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
307 重定向 该向Location里的URI重新发起
301 永久重定向
303 资源在别处
304 资源没有修改
404（未找到） 服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。
401 没有权限
403 禁止访问
404 资源地址错误
505（HTTP 版本不受支持） 服务器不支持请求中所使用的 HTTP 协议版本。
500 服务端错误
503 服务端超载
504错误代表网关超时 （Gateway timeout），是指服务器作为网关或代理，但是没有及时从上游服务器收到请求。
三、原生JS实现ajax
原生js实现ajax
1、创建XMLHttpRequest对象 var xhr=new XMLHttpRequesr()
2、打开接口 建立联系 xhr.open(参数1，参数2，[参数3])
参数1：请求方式 get post
参数2：接口 url路径
参数3：是否为异步 默认true 异步
3、发送数据 xhr.send();
4、增加状态改变事件
xhr.onreadystatechange=function(){
xhr.readyState 准备状态 4
xhr.status 状态码 200
xhr.responseText 数据
}
<body>
<input type="text" name="" id="name" placeholder="请输入用户名" value="" />
<input type="text" name="" id="age" placeholder="请输入年龄" value="" />
<button type="button" id="btn">发送</button>
<p id="content"></p>
<script type="text/javascript">
btn.onclick = function(){
var xhr = new XMLHttpRequest();
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
xhr.open("POST","https://www.520mg.com/ajax/echo.php",false);
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
content.innerHTML=xhr.responseText;
}
}
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(`name=${name}&age=${age}`);
}
</script>
</body>
四、GET与POST请求的区别和同步、异步
1、GET与POST请求的区别
get形式请求数据，参数会以明文的形式拼接在url地址的后面，请求的长度受到url地址格式的限制；一般敏感信息不建议用get方式
post形式请求数据，参数会打包到请求对象中进行传递，不会显示在url地址中。数据请求的安全性比较GET而言更加隐秘
get方式参数长度受url地址限制，post方式不受限制
get方式请求的数据可能使唤村里的信息，post方式不能缓存
2、同步与异步
同步与异步
同步：不同的事情按照先后顺序执行，后一件事情必须等前一件事情执行完才能执行，否则处于等待状态
异步：不同事情同时执行，没有先后顺序
五、jQuery操作ajax和json与jsonp的区别
Jquery操作ajax
1、最底层$ajax()
参数:必须 对象{namevalue…}
对象里属性与属性值
url 请求的路径
data 待发送数据 值{}
dataType 返回数据类型"json", “html”, “text” ,…
success 回调函数 请求成功后调用的回调函数
type 请求的方式 “GET”, “POST” 默认get方式
beforeSend 函数 发送请求之前的函数
error 函数 请求失败后调用的函数
2、第二层方法
$.get(参数1，参数2，参数3，参数4)
前三个参数与load（）方法用法一样 参数4：可选 返回数据类型 “json”,“javascript”，“html”.“xml”,“json”,“text”…
.
p
o
s
t
(
参
数
1
，
参
数
2
，
参
数
3
，
参
数
4
)
用
法
与
.post(参数1，参数2，参数3，参数4) 用法与
.post(参数1，参数2，参数3，参数4)用法与get()方法一样
3、最高层方法
$.getScript((参数1，参数2)
参数1:必须 服务器请求地址
参数2:可选 回调函数
$.getJSON(参数1，参数2，参数3)
参数1:必须 服务器请求地址
参数2:可选 待发送的数据0
参数3:回调函数
jquery对象.load(参数1，参数2，参数3)
load()常用于加载静态文件
1，参数1：url 必需 待加载的路径
2，data 可选，待发送的数据
3，callback 可选，
回调函数 在函数内部返回请求的数据
回调函数上有三个可选函数：
function(res,statusText,xhr){
res 返回结果 xhr.responseText
statusText 状态码对应的字符转
xhr XMLHttpRequest对象
}
4、json与jsonp的区别
json是一种数据类型
jsonp是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。(不支持post请求)
六、url组成及其他
1、url组成
https:www.520mg.com:443/ajax/echo.php?name=mumu&age=18#cate
https 协议
www子域名
520mg.com 域名
:443 端口号
/ajax/echo.php 路径
?name=mumu&age=18 查询条件
#cate 哈希值
2、浏览器同源策略
浏览器同源策略
当浏览器去访问服务器资源（ajax） 要求服务器的地址与浏览器同源
协议，域名，子域名，端口号要一致
3、跨域
跨域
绕过浏览器的同源策略，请求到数据
跨域方式
1. 服务器响应头信息跨域
Access-Control-Allow-Origin: *
2. jsonp跨域
3. 服务器代理（开发）
…
…
…
…
…
…
…
…
…
好了，暂时就这么多，没了。
1246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
