Ajax定义

昨天看到一篇面经,提到面试官问的第一个知识方面的问题是ajax的定义是什么。一看到,我就懵逼了,所以昨天花了点时间看了一下,在这里总结一下。

什么是ajax?

ajax,全称是Asynchronous javascript and xml,即异步JavaScript和xml。是一种创建交互式网页应用的网页开发技术。可以创建快速动态网页,无需重新加载整个网页的情况下(通过在后台与服务器进行少量数据转换),能够更新部分网页(使网页实现异步更新),使得因特网应用程序更小更快更友好。它的核心是XMLHTTPRequest。

ajax的优点和缺点

优点:在不更新整个页面的前提下维护数据,web应用程序更为迅捷的回应用户动作。

缺点:

1.破坏了浏览器的后退功能。

解决方案:HTML5创建或使用一个隐藏的iframe来重现页面上的变更。

2.破坏加入收藏书签功能。

解决方案:

1.HTML5用URL片段标识符来保持追踪,允许用户回到指定的某个应用程序状态。

2.直接操作浏览历史,以字符串的形式存储网页状态,将网页加入网页书签、收藏夹时状态会被隐形保留。

 

除此之外,ajax还需要注意的一点是:网络延迟,即用户发出请求到服务器回应之间的间隔。

处理方式是用可视化组件告诉用户系统正在进行的后台操作和正在读取数据和内容。

XMLHTTPRequest怎么使用

IE7+、Firefox、Opera、Chrome、Safari等支持原生的XHR的对象:

var xhr=new XMLHttpRequest();

IE7以下浏览器则不支持原生的XHR对象:

function createXHR(){
    if(typeof arguments.callee.axtiveXString!="string"){
        var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
        for(i=0;len=versions.length;i

所有浏览器都可以用以下这段代码:

function createXHR(){
    if(typeof XMLHttpRequest !="undefined"){
        return new XMLHttpRequest();}
    else if ( typeof arguments.callee.axtiveXString!="string") {
        var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
        for(i=0;len=versions.length;i

 XHR的用法:

xhr.open(要发送的请求类型,请求的URL,是否为异步请求)

xhr.send(作为请求主体发送的数据)

1.xhr.open()——要发送的请求类型:

请求类型分别有GET和POST。

GET:常用于向服务器查询某些信息,可以将需要添加的字段放到URL末尾,但是经常会出现查询字符串格式有问题这种情况,所以需要用encodeURIComponent进行编码。addURLParam方法用于在URL后面添加字段,可多次调用。

当请求方式为GET时,xhr.send(null);send的传入参数为null。

function addURLParam(url,name,value){
   url+=(url.indexof("?")==-`?"?":"&";
   url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
   return url;
}

POST: 常用于向服务器发送应该被保存的数据。(其请求主体可包含非常多的数据,且格式不限)。

当请求方式为POST时,xhr.send(请求数据)。send的传入参数为数据

步骤是:

1).设置请求头部

2).传入文档

 3).将文档序列化

4).将序列化的文档传入xhr.send()中

xhr.open(post,"xx.php",true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置头部信息
var form=document.getElementById("user-Info");
xhr.send(serialize(form));//将传入的文档序列化

2.xhr.open()——同步异步发送:

涉及到的其他相关属性:

i). status:响应的HTTP状态

iI). statusText:HTTP状态的说明(在跨域时不可靠)

iii). responseText:作为响应的主题被返回的文本

iv). responseXML:如果响应的内容为“text/xml”或者“application/xml”时,该属性保存包含响应数据的文档

1).为true时异步发送

异步发送时要检测readyState属性;readyState属性有0、1、2、3、4五个状态。状态每变一次则触发onreadystatechange事件。而只有当状态为4,即表示已经接收到全部响应数据可以在客户端使用时,才会做一系列操作,而其他状态基本上都不会去关注。

var xhr=createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readystate==4){
        if(xhr.staus>=200&&xhr.status<300||xhr.status==304){
              alert(xhr.responseText);
         }else{
              alert("request was unsuccessful:"+xhr.status);
         }
    }
};
xhr.open("get||post",url,true);
xhr.send(null||序列化数据)

可以用xhr.abort()取消异步请求,导致的结果是XHR停止触发事件,不再允许访问任何与响应有关的属性。

终止之后,对XHR对象进行解引用操作。 

2).为false时同步发送 

XMLHttpRequest 2级

FormData

超时设定

overrideMimeType()方法

进度事件

load事件

progress事件

emmm,我今天不想写了。我不知道写这个东西有没有必要,可是就我目前而言,我觉得是很浪费时间的,也许我不应该选择在正式的学习时间写这些,而应该在平时闲来无事的时候打发时间。emmm,算了,滚蛋蛋吧。改天再改。

你可能感兴趣的:(JavaScript)