Ajax

1>概念

AJAX是异步的 JavaScript 和 XML，它不是新的编程语言，它是一种新方法。

2>过程

浏览器让XHR跟浏览器要点数据-》浏览器接着干别的事-》XHR去向浏览器请求数据-》服务器返回数据给XHR-》XHR通知浏览器数据回来了-》浏览器收到XHR返回的数据渲染页面

3>关于技术

1)XHR:全称XMLHttpRequest,它是浏览器的内置对象是Ajax的核心，它是一种支持异步请求的技术。

2)AJAX技术体系的组成部分？HTML，css，javascript，dom，xml，xmlHttpRequest

3)Ajax请求总共有八种Callback：onSuccess，onFailure，onUninitialized，onLoading，onLoaded，onInteractive，onComplete，onException。

4>js原生书写过程

1.创建对象：因为兼容性问题，要判断，在IE5，IE6中创建ActiveXObject("Microsoft.XMLHTTP")，在其他现代浏览器中创建XMLHttpRequest()

2.连接，发送

xmlhttp.open("GET","ajax_info.txt",true);

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

xmlhttp.send();

3.响应

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

Onreadystatechange：当 readyState 属性改变时，就会调用该函数。

readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

Status：状态码

使用 XMLHttpRequest 对象的 responseText（获得字符串形式的响应数据。） 或 responseXML（获得 XML 形式的响应数据。） 属性。

5>全代码

var xhr=null;

if(window.XMLHttpRequest){

    xhr=new XMLHttpRequest();

}else{

    xhr=new ActiveXObject("Microsoft.XMLHTTP")

}

var url="数据";

xhr.open("get",url,true);

xhr.send();

xhr.onreadyStatechange=function(){

    if(xhr.readyState==4&&xhr.status==200){

        console.log(xhr.responseText);

        //console.log(xhr.responseXML)

    }

}

6>优缺点

1》优点：

1)最大的优点是可以无刷新的效果来更改页面的局部内容。

2)使用异步方式与服务器通信，不需要打断用户操作，具有更加迅速的响应能力

3)ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，减去服务器的压力

4)基于标准化的并被广泛支持的技术，不需要下载插件或小程序

2》缺点：

1)ajax干掉了back按钮，即浏览器的后退机制的破坏（虽然可以解决但是它带来的开发成本非常高，与ajax框架要求的快速开发相违背，这是ajax所带来的一个非常严重的问题）

原因：因为浏览器仅能记下历史记录中的静态页面，一个被完整读入的页面和一个已经被动态修改过的页面之间差别非常微妙

解决问思路：用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏iframe来重现页面上的变更

             使用url片断标识符来保持跟踪，允许用户回到指定的某个应用程序状态

2)安全问题：ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器建立新的攻击，还有ajax也难以避免一些已知的安全弱点跨站脚本攻击

3)对搜索的引擎支持比较弱

4)破坏了程序的异常机制

5)无法用url直接访问，违背了url和资源定位的初衷，例如给你一个url地址，如果采用ajax记住，也许你在改url地址下面看到的和我在这个url地址下面看到的内容不同

ajax缓存问题

Ajax在发送的数据成功后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求时，它会直接从缓存中把数据取出来，就不会与服务器交互。

7>使用场景问题

1》不适合的场景：

1)搜索：ajax干掉了back按钮，这对于已经养成在搜索习惯的用户时不友好的

2)替换大量文本：ajax可以实现页面局部刷新，但是如果页面的每个部分都改变，还不如重新做一次服务器的请求

2》适合场景：

1)类似投票，yes/no等无关痛痒的场景：如果提交过程需要40秒，那么很多用户就会直接忽略而不去参与

2)表单驱动的交互：使用ajax点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示出来