1、Ajax
全称asynchronous(异步的)JavaScript and XML,是一种无需加载网页而更新网页部分内容的技术。
同步:客户端发起请求,然后客户端一直等待服务器端处理,收到服务器端响应后,客户端重新载入整个页面,如果有错误客户端再次发起请求……
异步:客户端发起请求,服务器端处理的同时客户端可以继续运行,没有等待,服务器端的响应会实时反馈给客户端。
步骤:
运用XMLHttpRequset对象和web服务器进行数据的异步交换;
运用JS操作DOM实现动态局部刷新。
语法:
var request=new XMLHttpRequest();
request.open("GET/POST","URL",true/false); //true表示异步请求,默认可省略,false表示同步请求
request.send(string);
XMLHttpRequest对象的属性和方法:
readyState属性:HTTP请求的状态。4表示HTTP响应已完全接收。
status属性:HTTP状态码。202表示成功,404表示"Not Found"。
responseText属性:服务器接收到的响应体,字符串形式。
onreadystatechange事件句柄:每次readystate属性改变的时候调用的事件句柄函数。
可参考(http://www.w3school.com.cn/xmldom/dom_http.asp)
例:发送Ajax请求 查询并处理
var request=new XMLHttpRequest();
request.open("GET","server.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("searchResult").innerHTML=request.responseText;
}else{
alert("发生错误"+request.status);
}
}
}
2、JSON
全称JavaScript Object Notation,是一种存储和交换信息的表示法,类似XML,它采用【键值对】的方式组织,易于及其解析,
json是独立于语言的,只要按照规则任何语言都可以解析json,
与xml相比,json长度短,读写速度快,可以使用js内建的方法eval()解析转换为js对象,
表示:json值可以是字符串(用双引号)、对象(用{})、数组(用[])、数字、true/false、null,
如,var jsondata=‘{"staff":[{"name":"mavis","age":24},{"name":"jack","age":25},{"name":"tony","age":26},]}‘ ;
json解析
(1)eval(string):var jsonobj=eval(‘(‘+jsondata+‘)‘);
只接受字符串为参数,eval方法不会检查json字符串是否合法,而且json字符串中的JavaScript方法会自动执行,如果json字符串包含恶意代码,比如window.location转向了一个恶意地址,危险!不建议使用
(2)JSON.prase():
把json字符串解析为对象,会检查json字符串是否合法,不会执行json字符串中的JavaScript方法
3、用jQuery实现Ajax
$.ajax({
type:"POST", //POST/GET
url:"请求地址",
dataType:"json", //预期服务器返回的数据类型
data:{name:$("#staffname").val(),number:$("#staffnumber").val(),age:$("#staffage").val()},
success:function(data){}, //请求成功的回调函数,传入返回的数据和包含成功代码的字符串
error:function(jqXHR){alert("请求失败:"+jqXHR.status);} //请求失败的回调函数,传入XMLHttpRequest对象
})
4、跨域
域名:http://www.abc.com:8080/index.js
http://协议
www子域名
abc.com主域名
8080端口号(http协议的默认端口号为80,一般可以省略)
协议、子域名、主域名、端口号其中任意一个不同,就叫做不同域,不同域之间相互请求资源叫作“跨域”。
JavaScript出于安全考虑,不允许跨域即同源策略,但是<script><img>这些含有src属性的标签没有同源策略,所以
处理跨域方法1:jsonp
原理:给<script src="跨域的文件的地址"></script>,这个跨域的文件返回跨域的服务器端数据。因此json只支持GET请求,不支持POST请求。
在www.aa.com页面中
<script src=“http://www.bb.com/jsonp.js”></script>
<script>
function jsonp(json){alert(json[“name”]);}
</script>
在www.bb.com页面中
jsonp({"name":"洪七公","age":70})
例,客户端:
$.ajax({
type:"GET",
url:"http://***/serverjsonp.php?number="+$("#keyword").val(),
dataType:"jsonp",
jsonp:"callback",//回调函数
jsonpCallback:"callbackname",//回调函数名称,如省略服务器会自动生成
success:function(data){
……
},
error:function(jqXHR){
alert("发生错误"+jqXHR.status);
}
});
服务器端部分语句:
$jsonp=$_GET["callback"];
$result = $jsonp.‘({"success":false,"msg":"没有找到员工。"})‘;
$result = $jsonp.‘({"success":true,"msg":"找到员工:***"})‘;
查看调试工作台:
原文:http://www.cnblogs.com/xuxuemin/p/6971411.html