Ajax相关整理

[7986LiChang]

1. Ajax技术 = 异步JavaScript和XML

• 传统的网页（不适用AJAX）的情况下，如果需要更新内容，必须要重新加载整个网页。
• 但是在使用AJAX后，通过在后台与服务器进行少量数据交换，可以实现网页异步更新，在不重新加载整个网页的情况下，对页面局部进行更新。 可以使用Ajax构建动态性很强的web页面。例如：在谷歌搜索框中输入部分关键字后，javascript会将这些字符发送到服务器，然后服务器返回含有关键字的搜索建议的列表。

  2.XMLHttpRequest对象

  用于在后台与服务器交换数据。意味着可以在不重新加载整个网页的情况下，对网页的部分进行更新。

  1）创建XMLHttpRequest对象：

  var xhr = new XMLHttpRequest(); 但是在老版本的IE5和IE6中，是使用ActiveX对象 var ax = new ActiveX("Microsoft.XMLHTTP"); 因此，应对所有浏览器创建XMLHttpRequest对象使用的是：

  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）使用XMLHttpRequest对象向服务器发送请求

  主要通过XMLHttpRequest对象的以下两个方法实现：

• xmlhttp.open("GET", "test1.txt", true); //使用GET方法请求位于服务器的文件test1.txt，并使用异步方式执行请求
• xmlhttp.send(string); //将请求发送到服务器

  (1)当使用异步方式true请求数据时，要注意使用onreadystatechange属性

  xmlhttp.onreadystatechange = function(){
  if(xmlhttp.readyState ==4 && xmlhttp.status ==200){
         //请求成功，并获取响应
        //写定响应代码
  }
  }

  3）使用XMLHttpRequest对象获取服务器响应

  主要通过XMLHttpRequest对象的以下两个属性实现：

• xmlhttp.responseText //获得字符串形式的响应数据
• xmlhttp.responseXML //获得XML形式的响应数据，需要对XML对象进行解析 例如：

  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  xmlDoc=xmlhttp.responseXML;
  txt="";
  x=xmlDoc.getElementsByTagName("title");
  for (i=0;i<x.length;i++)
    {
    txt=txt + x[i].childNodes[0].nodeValue + "<br />";
    }
  document.getElementById("myDiv").innerHTML=txt;
  }
  }
  xmlhttp.open("GET","/example/xmle/books.xml",true);
  xmlhttp.send();

  4）onreadystatechange事件

  （1）XMLHttpRequest对象有三个重要属性：

• xmlhttp.readyState 保存XMLHttpRequest的状态，包含4个值：
  • 0：UNSET,未发送，请求还未初始化
  • 1：OPENED,已打开，服务器已建立连接
  • 2：HEADERS_RECEIVED，客户端已接收到服务器返回的响应头
  • 3：LOADING 服务器返回的主体内容正在传输中，服务器正在处理请求
  • 4：DONE 响应主体内容已被客户端接收，服务器请求处理完成，并且响应已经就绪
• xmlhttp.status 表明响应状态，有2个值：
  • 200： “OK”，成功响应
  • 404：未找到页面
• xmlhttp.onreadystatechange 存储函数，每当readyState 属性改变时，就会调用该函数

  （2）onreadystatechange事件

• 在onreadystatechange事件中，规定当服务器响应已做好被处理的准备时所执行的任务 readyState ==4 && status ==200，表示响应已就绪
• onreadystatechange事件会被触发5次（0-4），对应readyState的每个变化

  （3）使用回调函数callback

  var xmlhttp;
  //声明回调函数
  function loadXMLDoc(url,cfunc)
  {
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=cfunc;
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
  }
  function myFunction()
  {
  //执行回调函数
  loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
  });
  }

  <button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

[7986LiChang]

报错：在chrome本地运行（file协议），其中包含Ajax请求时

会报错：

XMLHttpRequest cannot load file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviecat/movie/view.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 即跨域请求仅支持协议：http， data，chrome， chrome-extension，https，chrome-extension-resource

• 因此，chrome不支持file协议下的AJAX请求，但是在firefox浏览器下，支持file协议下的AJAX请求。

对应在chrome下的解决方法：

1）可以通过插件SublimeServer（提供静态文件HTTP服务器），从而模拟通过服务器访问

[7986LiChang]

HTML与XML

XML是可扩展标记语言，用于结构化、存储以及传输信息。

• XML用于传输数据
• HTML用于格式化显示数据

[7986LiChang]

3. AJAX ASP/PHP请求实例

可以用AJAX创建动态性更强的应用程序 可以请求php文件，发送带有查询字符串的GET请求

[7986LiChang]

４. AJAX 用于与数据库通信

网页可以通过AJAX从数据库读取信息

• 搭建数据库
• 在php页面中连接访问数据库，获取查询结果，并返回html格式的数据
• 在客户端index页面，向php页面发送ajax查询请求，获取响应数据后，在浏览器显示

[7986LiChang]

5.AJA可用于与XML文件进行交互式通信

使用AJAX读取来自XML文件的信息 xmlhttp.responseXML获取得到xml数据后

var data = xmlhttp.responseXML;
var txt = "";
//解析xml数据
var datainfo = data.getElementsByTagName("CD");   //获取全部CD标签
//遍历所有CD标签
for(var i = 0; i < datainfo.length; i++){
     var titlename = datainfo[i].getElementsByTagName("TITLE");
     //获取titlename元素中的值
     txt += titlename[0].firstChild.nodeValue;
}
document.getElementById("txt").innerHTML = txt;

[7986LiChang]

6.获取ajax响应头部信息

通过以下两个方法:

• xmlhttp.getAllResponseHeaders() //获取所有响应头
• xmlhttp.getResponseHeader("Last-Modified") //获取指定响应头部信息 获取到的响应头部不会与在浏览器控制口看到的完全相同，因为通过这种方式获取的头部只有简单头部，例如 Cache-Control， Content-Language，Content-Type，Expires，Last-Modified，Pragma等头部字段

[7986LiChang]

7.使用AJAX的基本套路

• 创建XMLHttpRequest对象 var xmlhttp;
• 定义onreadystatechange事件 xmlhttp.onreadystatechange = function();
• 定义ajax请求 xmlhttp.open("GET", url, true);
• 发送ajax请求 xmlhttp.send()

[7986LiChang]

8.xhr对象的其他方法：

• xmlhttp.abort() 中断当前AHAX请求，当请求被中断时触发事件xmlhttp.onabort
• xmlhttp.setRequestHeader([key], [value]) 设置请求头信息 如果要传递中文汉字，要先将传递内容进行编码 xmlhttp.setRequestHeader("ajax", encodeURIComponent("前后端交互"))；

[7986LiChang]

9.跨域解决方案

使用XHR（XMLHttpRequest对象）实现Ajax请求时，一个重要约束是浏览器的同源策略： 默认情况下，发送Ajax请求时，请求URL的域名必须和当前页面完全一致，即只能访问同源资源，“相同的域、相同的端口、相同的协议”。

若试图访问非同源下的资源，都会引发安全错误。

三类跨域解决方案：

• 1）CORS（Cross-Origin Resource Sharing）跨域资源共享，都要在服务端响应报头上添加Access-Control-Allow-Origin
  • IE8通过XDomainRequest对象支持CORS
  • 其他浏览器通过XHR对象原生支持CORS，即在chrome/firefox等浏览器中，可以直接通过xhr访问跨域资源并不会产生问题
• 2）图像Ping 使用标签，只能发送get请求，并且只能单向请求服务器数据，并且无法访问服务器的响应文本。
• 3）JSONP 通过动态 Githubissues.
• Githubissues is a development platform for aggregating issues.