AJAX学习笔记

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").onclick=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