Ajax指南

Posted xiaxu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax指南相关的知识,希望对你有一定的参考价值。

AJAX工作原理

一,Ajax所包含的技术

Ajax并非一种新的技术,而是原有技术的结合体。它由下列技术组合而成。

  1. 使用CSS和Xhtml来表示。
  2. 使用DOM模型来交互和动态显示。
  3. 使用XMLHttpRequest来和服务器进行异步通信。
  4. 使用javascript来绑定和调用。

二,怎样创建Ajax

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用Javascript来操纵DOM而更新页面。这当中最为关键的一步就是从服务器获得请求数据。

原生创建Ajax可分为以下四步:

1,创建XMLHttpRequest对象

所有现代浏览器均内建XMLHttprequest对象。如果支持,则创建XMLHttpRequest对象。如果不支持,则创建ActiveObject:

var xhr = new XMLHttpRequest();

老版本的IE(5和6)使用ActiveX对象;

var xhr = new ActiveXobject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,则用如下代码,

var xhr;
if (XMLHttpRequest)
    xhr = new XMLHttpRequest();
else
    xhr = new ActiveXObject("Microsoft.XMLHTTP");

2,准备请求

初始化该XMLHttpRequest对象,接受三个参数:

xhr.open(method,url,async);

第一个参数表示请求类型的字符串,其值可以是GET或者POST。GET请求:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST请求:

xhr.open("POST",demo.php,true);

第二个参数是要作为请求发送目标的URL。第三个参数是true或者false,表示请求是一异步还是同步模式发出。

  • false:同步模式发出的请求会暂停所有Javascript代码的执行,直到服务器获得响应为止。如果浏览器在连接网络时或者在下载文件时候出了故障,页面就会一直挂起。
  • true:异步模式发出的请求,请求对象收发数据的同时,浏览器可以继续加载页面,执行其他Javascript代码。

3,发送请求

xhr.send();

一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的URL参数中,此时的send方法的参数为null或者空。

GET请求:

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST请求:如果需要像HTML表单那样POST数据,请使用setRequestHeader()来添加HTTP头部。然后在send()方法中规定要发送的数据:

xhr.open("POST",demo.php,true);
xhr.setRequestHeader("Content-Type","application/x-www-formm-urlencoded;charset=UTF-8");
xhr.send("name"+uerName+"&age="+userAge);

4,处理响应

xhr.onreadystatechange = function()
if(xhr.readyState == 4 && xhr.status ==200)
    console.log(xhr.responseText);

  • 0 (未初始化) or (请求还未初始化)
  • 1 (正在加载) or (已建立服务器链接)
  • 2 (加载成功) or (请求已接受)
  • 3 (交互) or (正在处理请求)
  • 4 (完成) or (请求已完成并且响应已准备好)

4,完整示例

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() 
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() 
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) 
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  

  function alertContents() 
    if (httpRequest.readyState === XMLHttpRequest.DONE) 
      if (httpRequest.status === 200) 
        alert(httpRequest.responseText);
       else 
        alert('There was a problem with the request.');
      
    
  
)();
</script>

在这个例子中:

  • 用户点击 “Make a request” 按钮;

  • 事件处理调用 makeRequest() 函数;

  • 请求已通过然后(onreadystatechange)传给 alertContents() 执行。

  • alertContents() 检查返回的响应是否OK,然后 alert() test.html 文件内容。

三,Ajax应用场景

  • 数据验证

  • 按需求取数据

  • 自动更新页面

四,Ajax的优缺点

优点:

  • 页面无需刷新,用户体验好 。
  • 异步通信,更快的响应能力。
  • 减少冗余请求,减轻的服务器负担。
  • 基于标准化并被广泛支持的技术,不需要插件或者小程序。

缺点:

  • Ajax干掉了bakc按钮,即对浏览器后退机制的破坏。
  • 存在一定的安全问题。
  • 对搜索引擎的支持比较弱。
  • 破坏了程序的异常机制。
  • 无法用URL直接访问。

以上是关于Ajax指南的主要内容,如果未能解决你的问题,请参考以下文章

一文教你全方位揭秘Ajax指南

《JavaScript权威指南》学习笔记之二十---XMLHttpRequest和AJAX解决方式

权威指南之脚本化http

ajax牙椅用户指南

前端性能优化指南

前端性能优化指南