AJAX
1、同步进化到异步是由于XMLHttpRequest(部分更新,无需重新加载整个页面)对象的出现。
2、var request = new XMLHttpRequest();
在IE6,IE5以上的版本基本上都兼容XHR,但是由于有些低的版本没有,因此我们可以用下面一句进行判断:
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();//IE7,firfox,chrome,Opera....
}
else{
request = new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}
3、HTTP请求
HTTP是一种无状态协议,在客户端与用户之间,在发送请求和相应后,就断开连接,没有记忆。
请求过程:
get请求简单来说就是用来读取信息的而不是修改信息。任何人都是可见的,所以的值都显示在URL中,也就说get是利用URL来请求的。发送数量有限在2000个字符左右
post比较安全。一般用于修改服务器上的数据,从表单发送一些数据等。这些数据不在URL中显示,所有值将嵌入到请求体中,发送数据没有限制。
4、XMLHttpRequest发送请求
发送方法有: open(method,url,async)//async代表发送的请求时同步/异步,默认值就是ture
send(string)//请求发送到服务器,用get方法可以省略,如果用post请求就必须填写string
例如:request.open("get","get.php",ture)
request.send();
request.open("post","create.php",ture)
request.setRequestHeader("Conten-type","application/x-www-form-urlencoded");//告诉服务器要发送一个表单,一定要写在open与send中间
request.send("name = 王二狗 & sex = 男");
5、XMLHttpResquest取得响应
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应
status和statusText:以数字和文本形式返回HTTP状态吗
getAllResponseHeader:获取所有相应报头
getResponseHeaser:查询相应中某个字段的值
readyState属性://服务器响应状态信息,我们需要去监听
0:请求未初始化,open还没有调用
1:服务器连接已建立,open已调用
2:请求已接收,也就是接收到头信息
3:请求处理中,也就是接收到相应体了
4:请求已完成,且相应就绪,也就是相应完成了
//那么怎么去监听呢?我们需要调用一个函数,因为我们知道readyState有5个状态,因此我们做如下操作:
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//做一些事情提示响应成功:request.responseText
}
}
6、在JS中可以用添加一个方法的方法来进行AJAX异步交互
对于用GET方法:
<script>
document.getElementById().onclick = function(){
//发送AJAX请求并且处理,ID可以是一个按钮
var request = new XMLHttpRequest();
request.open("get","service.php?number="+document.getElementById().value());
request.send();
request.onreadystatechange = function (){
if(request.readystate == 4)
{
if(equest.state == 200)
{//更新结果,将结果更新用文本的形式传给局部的区域要修改的id
document.getElementById("").innnerHTML() = request.responseText;
}
else//没有成功响应就把信息弹出来
elert("error : "+request.state);
}
}
}
</script>
对于用POST方法://用GET进行修改
<script>
document.getElementById().onclick = function(){
//发送AJAX请求并且处理,ID可以是一个按钮
var request = new XMLHttpRequest();
request.open("post","service.php");
//由于GET是把参数放在URL中进行传输,而POST则是将数据用send方法传输,因此这也就是为什么POST比较安全的原因
//将我们填入文本框的值用getElementById的方法获取出来然后拼成一个字符串
var data = "name"+document.getElementById("").value()+....+;//每个参数之间要用&符号隔开
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//这里也是get与post的不同之处
request.send(data);
request.onreadystatechange = function (){
if(request.readystate == 4)
{
if(equest.state == 200)
{//更新结果,将结果更新用文本的形式传给局部的区域要修改的id
document.getElementById("").innnerHTML() = request.responseText;
}
else//没有成功响应就把信息弹出来
elert("error : "+request.state);
}
}
}
</script>
7、跨域
一个域名地址的组成:
当协议、子域名、主域名、端口号中任意一个不同时,都算作不同域
不同域之间的相互请求资源,就叫做跨域
比如:
http://wwww.abc.com/index.html 请求 http://www.efg.com/service.php
JavaScript出于安全考虑,不允许跨域调用其它页面的对象。
什么是跨域呢?简单地理解就是因为javascript同源策略的限制,a.com域名下的js无法操作b.com或者c.com域名下的对象
8、处理跨域的方法
①创建代理(属于后端技术)
②JSONP
JSONP可以用于解决主浏览器的跨域数据访问的问题
在www.aaa.com页面中:
<script>
function jsonp(json){
alter(json["name"]);
}
</script>
<script src = "http://www.bbb.com/json.js"></script>
在www.bbb.com页面中:
jsonp({'name':'张三','age':24});
JSONP只能对GET请求产生效果,不支持POST请求
GET:
$(document).ready(function(){
$("#search").click(function(){ //等同于JS中的:document.getElementById("search").οnclick=function
$.ajax({
type:"GET",
url:"service.php?number="+$(#"keyword").val(), //利用选择器选择keyword的这个dom
dataType:"jsonp",
jsonp:"callback",
success:function(data){ //由于我们的dataType是json,因此我们获取的data其实已经解析了数据
if(data.success){
$("#SearchResult").html(data.msg); //在jquery中,innerHTML用html代替
}else{
$("#SearchResult").html("出现错误:"+datamsg);
}
}
error:function(jqXHR){ //在jquery中,jqXHR.status中就是可以提示我们响应是否是200
alert("发生错误"+jqXHR.status)
}
})
})
})
③XHR2