ajax

ajax是什么

AJAX(asynchronous javascript and XML)，翻译过来名称为：异步的Javascripth和XML，可以看出其并不是一种编程语言，而是一种在无需加载整个网页下更新部分数据的技术。

ajax包含的技术

1. 使用CSS和XHTML来构成网页。
2. 使用DOM模型来交互和动态显示。
3. 使用XMLHttpRequest对象来和服务器进行异步通信。
4. 使用javascript来调用。

ajax核心XMLHttpRequest

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

XMLHttpRequest对象属性:

• onreadystatechange 每次状态改变所触发事件的事件处理程序。
• responseText 从服务器进程返回数据的字符串形式。
• responseXML 从服务器进程返回的DOM兼容的文档数据对象。
• status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
• status Text 伴随状态码的字符串信息
• readyState 对象状态值
  
  • 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法
  • 1 (初始化) 对象已建立，尚未调用send方法
  • 2 (发送数据) send方法已调用，但是当前的状态及http头未知
  • 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
  • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

XMLHttpRequest对象属性

open(method, url, async)

method -向服务器提交数据的类型，即post还是get。
url -请求的url地址和传递的参数。
async -传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。

send()

send方法用来发送请求

实际应用

function createXmlHttpRequest() {

    //非IE浏览器创建XmlHttpRequest对象
    if (window.XmlHttpRequest) {
      xmlhttp = new XmlHttpRequest();
    }

    //IE浏览器创建XmlHttpRequest对象
    if (window.ActiveXObject) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {
        try {
          xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
        }
           catch (e) { }
        }
    }
}

function send() {

  var data = document.getElementById("username").value;

  createXmlHttpRequest();

  if (!xmlhttp) {
    alert("创建xmlhttprequest对象异常！");
    return false;
  }

  xmlhttp.open("POST", url, false);

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
       document.getElementById("user1").innerHTML = "数据正在加载...";
       if (xmlhttp.status == 200) {
         document.write(xmlhttp.responseText);
       }
     }
   }
    xmlhttp.send();
}

ajax的优点

1. 页面无刷新，提升用户体验
2. 异步方式与服务器通信，交换少量数据，具有更加迅速的响应能力。
3. 减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求。

ajax的缺点

1. 破坏浏览器后退机制，在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
   ps: 一个解决方案是使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪
2. AJAX的安全问题。难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
3. 对搜索引擎支持较弱，seo也不太友好。