关于ajax的一些总结(面试可能会使用的到)
参考:
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://segmentfault.com/a/1190000012469713
http://mp.weixin.qq.com/s/H2znDNNIVWC5o5i0bp1rhg
http://mp.weixin.qq.com/s/AcVV08QmiK80aALk7wu5uQ
0.ajax的优缺点:
优点:
页面无刷新
响应速度快
减少带宽
基于标准化,并被广泛的支持
缺点:
无法后退
印象程序的异常处理机制
安全问题
对搜索引擎的支持比较弱
1.最原始的ajax的写法:
1.什么是ajax
页面不跳转,就可以更新页面的部分内容
2.ajax的原生写法:
就是XMLHttpRequest对象的使用(这个是Ajax技术的核心)
3.ajax的请求流程:
1.创建XMLHttpRequest对象
2.打开请求地址,初始化请求对象
3.发送请求数据
4.监听回调函数的状态
5.收到服务器,返回的应答结果
4.ajax的具体写法:
代码:
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest) //兼容和其他的浏览器
{// code for all new browsers
xmlhttp=new XMLHttpRequest();//在这里创建 XMLHttpRequest对象
}
else if (window.ActiveXObject) //兼容IE浏览器
{// code for IE5 and IE6
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xmlhttp!=null)
{
xmlhttp.open(“GET”,url,true); //请求的方式和请求地址
xmlhttp.send(null);//发送请求
xmlhttp.onreadystatechange=state_Change;//监听回调函数
}
else
{
alert(“你的浏览器不支持异步请求”);
}
}
function state_Change() //这里是回调函数(监听服务器的应答和服务器的状态)
{
if (xmlhttp.readyState4&&xmlhttp.status200)
//当满足这两个条件时表示请求成功,完成响应 4 = “loaded”, 200 = OK
{
var data=xmlhttp.responseText; //拿到服务器返回的数据
// …our code here…在这里进行数据返回后的操作
}else
{
alert(“Problem retrieving XML data”);
}
}
2.原生ajax的步骤总结:
1.HTML中,创建XMLHttpRequest对象
function getXhr(){
var xhr=null;//定义核心对象
if(window.XMLHttpRequest){//这是其他浏览器
xhr=new XMLHttpRequest();
}else{//这是IE
xhr=new ActiveXObject(“Microsoft.XMLHttp”);
}
return xhr;
}
var xhr=getXhr();
2.与服务器建立链接open()方法—其实他叫做注册监听
type–指定POST
对象.open(“post”,“02.php”);
3.向服务器发送请求数据–send()方法,post请求一定要设置setRequestHeader请求头信息
//在这里还是失效了,需要手动设置请求头,必须在send()之前设置(固定写法,必须记住)
xhr.setRequestHeader(“Content-Type”,“application/x-www.form-urlencoded”)
xhr.send(“user=adasdasd$pwd=kjkjlk”);
4.接收服务器端响应数据(这一步放在那里都行好像)
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status=200){
var data=xhr.responseText;
console.log(data);
}
}
form表单有一个隐藏的属性 enctype(自己下去查一查)
请求头 content-text:里面有
提交表单,表单请求数据主要在于这个属性
5.简化的步骤:
改变后步骤(这4个步骤,也是对的)
1.创建核心对象(必须写在第一步)
2.注册监听(监听服务器状态)
保证你请求成功
readyState 为4响应完毕
可以接受responseText属性
3.与服务器端建立链接
4.向服务器端发送请求数据
6.注册监听之后服务器的5种状态(其实,就是异步请求的过程而已)
0:初始化,对象被创建了 new 方法被执行了
1.已经建立了连接,和服务器 open()方法
2.已经发送了请求 sent()
3.响应头接收完毕
4.响应体接收完毕
3.jQuery经常使用(用的是jQuery的响应)
$.ajax({
type:“post”,
url:“请求的地址”,
async:“是否支持异步刷新,默认为true”,
data:“需要提交的数据”,
dataType:“服务器返回的数据”,
success:function(data){
},
error:function(data){
}
})
4.关于ajax的跨域请求
暂且不说
5.请求头和响应头的区别和认识
1.请求头信息:
Accept：客户端支持的数据类型
Accept-Charset：客户端采用的编码
Accept-Encoding：客户端支持的数据压缩格式
Accept-Language：客户端的语言环境
Cookie：客服端的cookie
Host：请求的服务器地址
Connection：客户端与服务连接类型
If-Modified-Since:上一次请求资源的缓存时间，与Last-Modified对应
If-None-Match：客户段缓存数据的唯一标识，与Etag对应
Referer:发起请求的源地址。
2.响应头的一些信息:
content-encoding：响应数据的压缩格式。
content-length：响应数据的长度。
content-language：语言环境。
content-type：响应数据的类型。
Date:消息发送的时间
Age:经过的时间
Etag:被请求变量的实体值,用于判断请求的资源是否发生变化
Expires：缓存的过期时间
Last-Modified：在服务器端最后被修改的时间
server：服务器的型号
4.最常遇见的问题–ajax的跨域解决方案:
1.CORS的解决方案
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
2.跨域出现的问题:
问题一:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
并且The response had HTTP status code 404
原因:
本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)
服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址
问题二:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
并且The response had HTTP status code 405
原因:
后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象
解决方案: 后端关闭对应的安全配置
问题三:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource,
并且status 200
原因:
头部匹配时出现不匹配现象
解决方案: 后端增加对应的头部支持
问题四:
heade contains multiple values ‘,’
表现现象是，后台响应的http头部信息有两个Access-Control-Allow-Origin:*
3.解决跨域问题的常见方案:
一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:
(注意，现在已经几乎不会再使用JSONP了，所以JSONP了解下即可)
1.为什么不使用jsonp
使用script的标签,只可以使用get方式的请求
2.CORS如何使用
在后台解决吧(看起来,比较麻烦)
http://mp.weixin.qq.com/s/AcVV08QmiK80aALk7wu5uQ
3.原生的jsonp跨域解决方案:
利用的是script标签可以跨域的特性
var script=document.createElement(‘script’);
script.type=‘text/javascript’;
//请求服务器,传参,指定执行函数的返回函数 onBack
script.src=‘http://www.baidu.com:8080/login?user=admin&callback=onBack’;
//将元素挂载到DOM结构中
document.head.appendChild(script);
//执行回调函数
function onBack(res){
alert(res);
}
理解:
就是给原来的页面加一个script标签,接收标签请求的返回值
4.利用jQUery来实现jasonp的请求()
$.ajax({
url:“http://www.baidu.com:8080/login”,
type:‘get’,
dataType:‘jasonp’,
jasonpCallback:‘自定义的回调函数名’,
data:{ 需要传递的数据 }
})
进行案例的测试–试一试吧