Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

2197

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量158

点赞数

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也难以避免一些已知的安全弱点跨站脚本攻击