1. ajax交互流程：
ajax数据交互流程
1、创建一个ajax对象
2、填写请求地址
3、发送请求
4、等待服务器响应
5、接收数据
1、创建一个ajax对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2、填写请求地址 3、发送请求
xmlhttp.open(method,url,async);
xmlhttp.send();
<pre>method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）</pre>
4、服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
如果来自服务器的响应并非 XML，请使用 responseText 属性。
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。
onreadystatechange 事件：
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
1、onreadystatechange ：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
2、readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
3、status ：
200: "OK" ；404: 未找到页面
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
<pre>xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}</pre>
<pre><script>
window.onload=function(){
var inputs=document.querySelectorAll("input");
inputs[2].onclick=function(){
var val=inputs[0].value;
//1、创建一个ajax对象
var ajax=new XMLHttpRequest;
//2、填写请求地址
ajax.open('get','php/get_json.php?user='+val,true);
//3、发送请求
ajax.send();
//4、等待服务器响应
ajax.onload=function(){
//5、接收数据
var span=document.querySelector("span");
//ajax请求过来的数据都是字符串，它不能用对象的操作方法 直接操作
//console.log(typeof ajax.responseText); //string
var result=JSON.parse(ajax.responseText);
//span.innerHTML=ajax.responseText;
if(result.code==0){
alert('可以注册');
}else{
alert('请换一个');
}
};
};
};
</script>
</head>
<body>
用户名：<input type="text" name="username" /><span></span>`<br /><br />`
密码：<input type="password" name="password" />
<input type="button" value="提交" />
</body></pre>
2. get和post的区别
get方式:
1、通过地址栏信息进行数据传输，传输的大小有限制
2、不安全，用户的所有信息都会暴露出来
3、拼接数据的时候要用encodeURI转一下码，不然有中文就会乱码
4、不用设置请求头
5、数据拼接在open方法里
6、会有缓存问题
post方式:
1、通过send向服务器传输数据，理论上来说是没有长度或体积限制
2、相对来说安全，因为不直接暴露用户信息
3、不用转码，已经通过请求头设置了数据格式，不会有乱码
4、在send()的前面需要设置一个请求头（不设置要出错）
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
5、数据要拼接在send方法里
6、没有缓存问题
<pre><script>
window.onload=function(){
var inputs=document.getElementsByTagName("input");
inputs[2].onclick=function(){
//console.log(decodeURI('%E9%99%88%E5%AD%A6%E8%BE%89'))
var val=inputs[0].value;
//1、创建一个ajax对象
var ajax=null;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest;
}else{
ajax=new ActiveXObject('Microsoft.XMLHTTP');
}
//2、填写请求地址
ajax.open('get','php/get.php?user='+encodeURI(val),true);
//ajax.open('post','php/post.php',true);
//post发送请求的时候一定要在发送前设置一下请求头
//ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//ajax.send('user='+val);
//3、发送请求
ajax.send();
//4、等待服务器响应
ajax.onreadystatechange=function(){
//5、接收数据
var span=document.getElementsByTagName("span")[0];
span.innerHTML=ajax.responseText;
};
};
};
</script></pre>
3. onreadystatechange与onload
ajax.readyState AJAX运行步骤：
它的值为4的话说明AJAX已经运行完成
0 初始化 还没有调用open()方法
1 载入 已调用send()方法，正在发送请求
2 载入完成 send()方法完成，已收到全部响应内容
3 解析 正在解析响应内容
4 完成 响应内容解析完成，可以在客户端调用了
ajax.status服务器对请求的反馈(状态码)，200就是成功的，404就是错误的。
onreadystatechange:
readyState的值发生改变时触发的事件，只要这个值有变化就会触发
onload:
所有请求成功完成后触发，此时readystate的值为4（IE678不支持）
（新的XMLHttpRequest不推荐用onreadystatechange，使用onload）
4. 封装ajax
<pre>
url 地址
method 请求方式get/post
dataType 返回什么数据类型srging/json/xml data 请求时候的传的数据（它是一个对象） succ 成功后的回调函数
fail 失败后的回调函数
function ajax(json){
var settings={
url:'',
method:'get',
data:{},
dataType:'json',
succ:function(){},
fail:function(){}
};
//用户传的参数覆盖默认参数
for(var attr in json){
settings[attr]=json[attr];
}
//把数据拼成正确的格式
var arr=[];
for(var attr in settings.data){
arr.push(attr+'='+settings.data[attr]);
}
settings.data=arr.join('&');
//声明一个ajax对象
var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
//设置请求方式
if(settings.method.toLocaleLowerCase()==='get'){
ajax.open(settings.method,settings.url+'?'+settings.data+'&'+new Date().getTime(),true);
ajax.send();
}else{
ajax.open(settings.method,settings.url,true);
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(settings.data);
}
//设置完成事件的兼容性
if(typeof ajax.onload==='undefined'){
ajax.onreadystatechange=ready;
}else{
ajax.onload=ready;
}
function ready(){
if(ajax.readyState==4){
if(ajax.status==200){
switch(settings.dataType.toLocaleLowerCase()){
case 'string':
settings.succ(ajax.responseText);
break;
case 'json':
settings.succ(JSON.parse(ajax.responseText));
break;
case 'xml':
settings.succ(ajax.responseXML);
}
}else{
settings.fail(ajax.status);
}
}
};
}</pre>
5. 跨域
跨域：两个不同域名下的数据进行交互。Ajax之所以不能跨域其实是因为XMLHttpRequest受到同源策略的限制，只能让它访问同源下的数据，不能访问不同源下的数据
同源策略
每个网站只能读取同一来源的数据，这里的同一来源指的是主机名(域名)、协议(http/https)和端口号的组合。在没明确授权的情况下，不能读写对方的资源，它是浏览器最核心也最基本的安全功能
源：协议、端口、域名
只要不同源就跨域
协议
http 超文本协议
https HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全
file 本地协议
ftp 文件共享协议
跨域解决办法
1、在标准浏览器下XMLHttpRequest配合后端设置一个请求权限
在php里写上 header('Access-Control-Allow-Origin:*');
这个是XMLHttpRequest 2级支持的，非标准浏览器不支持
2、服务器代理
服务器文件可以访问你想要的资源，而你又能访问服务器文件，所以你就可以访问想要的资源
缺点：如果想访问的资源需求有变，对于后端的开发成本就很大
3、iframe、flash、postMessage、WebSocket
http://www.freebuf.com/articles/web/65468.html
Jsonp:
ajax的核心是通过XmlHttpRequest获取非本页内容，
而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本
*带src属性的<script> < img > <iframe><link>等标签是不需要遵守同源策略的，但是通过src加载的资源，浏览器限制了javascript的权限，只能读不能写
*jsonp(json+padding)
1、通过script标签引入某些数据，是同步模式的，只有上面的代码加载完成才能继续加载下面的代码一般在用script标签做跨域的时候，不建议将数据提前加载，应该按需加载
2、当需要数据的时候创建一个script标签，将需要的数据放在src中，通过onload去监听是否请求过来，请求完毕就调用传回来的数据（异步加载）
3、jsonp不能用post请求只能用get方式请求
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>点击1</button>
<button>点击2</button>
< ul >< /ul >
< ul >< /ul >
<script>
var buttons=document.querySelectorAll("button");
var uls=document.querySelectorAll("ul");
buttons[0].onclick=function(){
var script=document.createElement("script");
script.src='http://localhost/php/jsonp_callBack.php?callback=fn1&num=number';
document.getElementsByTagName('head')[0].appendChild(script);
};
function fn1(data){
var str='';
for(var i=0;i<data.length;i++){
str+='<li>'+data[i]+'</li>';
}
uls[0].innerHTML=str;
}
buttons[1].onclick=function(){
var script=document.createElement("script");
script.src='http://localhost/php/jsonp_callBack.php?callback=fn2';
document.getElementsByTagName('head')[0].appendChild(script);
};
function fn2(data){
var str='';
for(var i=0;i<data.length;i++){
str+='<li>'+data[i]+'</li>';
}
uls[1].innerHTML=str;
};
</script>
</body>
</html>
</pre>
网友评论