AJAX总结
- 电脑系统 windows10 专业版
- 在开发的过程中,我们根据需求可能会使用到 ajax,下面是我对ajax的一些总结,希望对大家有所帮助!
作用：局部异步刷新网页
- 异步请求：请求数据的时候不会影响页面的其他操作
- 请求分两种
- 异步
- 同步
- 前后端交互的方式
1、form（表单提交）：
2、标签访问（src href）
3、AJAX
AJAX的同步请求步骤
1、创建请求对象
var xhr; if(window.XMLHttpRequst){ xhr=new XMLHttpRequst(); }else{ //IE 5 6 7兼容 xhr=new ActiveXObject('Microsoft.XMLHTTP'); }
2、启动请求
open(参数一，参数二，参数三)：用于设置请求方式和地址
参数一：请求方式
参数二：请求的url
参数三：是否异地发送，默认为true(异地)，false为同步
注意：open()的方法只是设置相关的请求信息，并不会真正发起请求
//同步请求 xhr.open('get',"http://localhost/self/AJAX-1/server.php?un=" + $("#user")\[0\].value + "&ps=" + $("#pass")[0].value",false); //异步请求 xhr.open('post',"",true)
3、发送请求
send() 发送请求
参数要传输给后台的数据，如果是get请求参数为null(不建议省略该参数，低版本火狐浏览器会报错)
xhr.send(null);
4、请求成功之后
status：http请求状态码
1XX：信息类状态，收到请求，正在处理
2XX：成功类状态，成功处理完成
3XX：重定向类状态，求情地址发生变化(304代表读缓存文件)
4XX：客户端错误，
5XX：服务器端错误，服务器识别不出信息，不能对请求作出处理
//同步请求 if(xhr.status >= 200 && xhr.status < 300 || 304 == xhr.status){ responseText//作为响应主体反映(后台返给我们的数据) responseXML//如果响应的数据类型为text/xml或者application/xml，此属性中保存 //后台传输进来的数据 }
异步请求
readyState:请求的状态
属性值
1，代表请求建立，还没有发出去
2，代表请求已经发送，正在处理中
3，代表请求处理中，已经拿了部分数据
4，代表请求完成，拿到了全部数据
xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304){ //请求成功 console.log(xhr.responseText) }else{ console.log('请求失败'); } } }
AJAX的异步请求步骤
1、创建请求对象
var xhr; if(window.XMLHttpRequst){ xhr=new XMLHttpRequst(); }else{ //IE 5 6 7兼容 xhr=new ActiveXObject('Microsoft.XMLHTTP'); }
2、设置请求
//同步请求 xhr.open('get',"http://localhost/self/AJAX-1/server.php",false); //异步请求 xhr.open('post',"http://localhost/self/AJAX-1/server.php")
3、设置请求头
xhr.setRequestHeader('CONTENT-TYPE','application/x-www-form-urlencoded');
4、发起请求
var parms="un"+$("#user")\[0\].value + "&ps=" + $("#pass")[0].value; //un=123&ps=123 xhr.send(parms);
5、处理数据
//同步请求 if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ console.log(xhr.responseText); }else{ console.log('请求失败'); }
异步请求
xhr.onreadystatechange = function() { if (4 == xhr.readyState) { if (xhr.status >= 200 && xhr.status < 300 || 304 == xhr.status) { // 请求成功 $("#showDiv")\[0\].innerHTML = xhr.responseText; } else { // 请求失败 $("#showDiv")[0].innerHTML = "请求失败"; } } }
AJAX跨域
同域：协议、域名、端口号 完全一致称为同域。
协议：http,https
域名：一级域名，二级域名，三级域名(数字越大范围越大)
端口号：8080,443等
https://www.oa.liangzi.com:8080
https: 协议
oa：三级域名
liangzi：二级域名
com: 一级域名
同源策略：
JS规定，协议，域名，端口号 一致即为同域(同源)，可以相互访问，即使后面的路径不相同，也是同源
为什么要有同源策略？
防止黑客通过JS脚本，恶意获取用户的账户和密码(例如：通过 iframe 仿制银行网页)
跨域：
前端通过AJAX向服务器请求数据时，都需要考虑和注意跨域问题
注意：只有JS中的AJAX才需要考虑跨域，像 ,,