什么是ajax
Ajax全称为Asynchronous Javascript+XML(异步JavaScript和XML),是一种技术方案,但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。
如何实现一个ajax请求
原生js
student.json
[
{
"name":"小红",
"grade":"大二"
},
{
"name":"张飞",
"grade":"大三"
}
]
复制代码
ajax.js
//流程模拟用户使用浏览器
//安装浏览器
var xhr=new XMLHttpRequest();
//输入网址
//open()
//第一个参数是请求类型GET/POST
//第二个参数为请求地址
//第三个参数为布尔值,表示异步/同步模式,默认为true,异步
xhr.open("GET","student.json");
//输入enter,开始请求
xhr.send(null);
//处理响应
//readyState代表请求/响应过程中当前活动阶段,有4个值:
//0:未初始化。还未调用open()方法
//1:启动。已经调用open(),还未调用send()
//2:发送。已经调用send(),还未接收到响应
//3:接收。已经接收到部分响应
//4:完成。已经接收到全部响应
xhr.onreadystatechange=function(){
if(xhr.readyState!=4) return;
console.log(xhr.responseText); //json格式
}
复制代码
- 封装一个ajax函数
//参数:options
//url:请求地址,type:请求类型,data:发送的数据,success
function ajax(options){
var xhr=null;
var params=formsParams(options.data);
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else {
xhr=new ActiveXObject("Microsoft.XMLHTTP"); //兼容IE浏览器
}
if(options.type=="GET"){
xhr.open("GET",options.url+"?"+params);
xhr.send(null);
}else if(options.type="POST"){
xhr.open("POST",options.url);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(params);
}
xhr.onreadystatechange=function(){
if(xhr.state==4&&xhr.status==200){
options.success(xhr.responseText);
}
}
function formsParams(data){
var arr=[];
for(var prop in data){
arr.push(prop+"="+data[prop]);
}
return arr.join("&");
}
}
复制代码
-
异步与同步
同步模式下,发送请求后,如果网络请求特别慢,页面就卡住一直等待数据的请求,用户就无法操作。所以要选择异步+监听事件机制。 -
xhr.status---http状态码
1xx:仅在与http服务器连接时使用
2xx:成功
3xx:重定向 304:数据没有改变,已经缓存
4xx:客户端错误
5xx:服务器错误 -
常用函数
load:响应完成是调用,即readyState=4时;
jquery
$.ajax({
url:"student.json", //请求的地址
type:"POST", //请求类型
data:JSON.stringify(data), //发送的数据
dataType:json, //响应的数据格式
success:function(){ //响应完成且成功回调函数
},
error:function(){ //响应完成但失败时的回调函数
},
})
$.get(url,data,function(data,status,xhr),dataType) //发送get请求
$.post(url,data,function(data,status,xhr),dataType) //发送post请求
复制代码
get与post请求的区别
- GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中,这种区别对用户是不可见的。
- GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题
什么是跨域
跨域问题是由于浏览器为了防止CSRF攻击,避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时(XHR请求),必须保证当前页面和请求的对象是同源的,即协议、域名和端口号要完全一致,否则浏览器就会阻止此跨域请求返回的数据。
解决跨域的方式
- jsonp(只解决get请求跨域)
原理:所有的src和href属性都不受同源策略限制,可以请求第三方服务器的数据内容。
步骤:
- 动态创建一个script标签
- src属性设置为接口地址,接口参数必须带一个自定义函数名,请求一个php文件返回一个自定义函数
- 通过调用自定义函数接收后台返回的数据
ajax.js
<script>
//去创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
}
</script>
//动态创建的script标签会请求到一个自定义函数
<script src="http://127.0.0.1:8888/index.php?callback=jsonpCallback">
jsonpCallback(data); //data就是服务器返回的数据
//通过调用函数的形式操作数据
<script>
复制代码
- CORS:跨域资源共享
原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求 限制:浏览器需要支持HTML5,可以支持POST,PUT等方法兼容ie9以上 - 搭建代理服务器做转发,让跨域变成同域
- websocket协议
websocket协议是HTML5的新的协议。它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。