Ajax基础

简介

是什么

Asynchronous JavaScript and XML——异步JavaScript和XML

AJAX 是一种在无需从新加载整个网页的状况下，可以更新部分网页的技术。

特色

• 不是编程语言，而是一种使用现有标准的新方法
• 无需加载整个界面，可与服务器交换数据，更新部分网页
• 不须要浏览器插件，但须要用户容许js在浏览器上运行

提出背景

传统的网页（不使用 AJAX）若是须要更新内容，必需重载整个网页面。

发起请求的方式通常是<input type="submit">

在上世纪90年代，几乎全部的网站都由HTML页面实现，服务器处理每个用户请求都须要从新加载网页。形式是怎样的呢？就好比说你在浏览器上登陆本身的微博帐号，填完了表单，点击登陆按钮，一次"完整"的HTTP请求就此触发，服务器发现你的登陆密码不对头，立马把网页原本来本的返回给你，在用户看来呢，就是一次从新加载的过程！用户体验极差！并且这个作法浪费了许多带宽，由于在先后两个页面中的大部分HTML码每每是相同的。因为每次应用的沟通都须要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这致使了用户界面的回应比本机应用慢得多。

工做原理

包含的技术

AJAX是基于现有的Internet标准，而且联合使用它们：

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (做为转换数据的格式)

原理简述

经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。

原理详述

Ajax的工做原理至关于在用户和服务器之间加了一个中间层(ajax引擎),使用户操做与服务器响应异步化。

并非全部的用户请求都提交给服务器,像—些数据验证(好比判断用户是否输入了数据)和数据处理(好比判断用户输入数据是不是数字)等都交给Ajax引擎本身来作, 只有肯定须要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎，用户操做起来也就感受更加流畅了。

浏览器普通交互方式：

浏览器的Ajax的交互方式：

同步与异步

异步传输是面向字符的传输，它的单位是字符；

同步传输是面向比特的传输，它的单位是帧，它传输的时候要求接受方和发送方的时钟是保持一致的。

同步的话，必须这个操做完了才会执行下一步，在等待期间浏览器会挂起不能执行任何接下来的js代码；

异步则是【告诉】浏览器去作，【告诉】是一瞬间的事情，而后就继续执行下一步了，等到结果返回来了，浏览器会通知js执行相应的回调。

优势和缺点

优势

1.无刷新更新数据。

AJAX最大优势就是能在不刷新整个页面的前提下与服务器通讯维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减小用户等待时间，带来很是好的用户体验。

2.异步与服务器通讯。

AJAX使用异步方式与服务器通讯，不须要打断用户的操做，具备更加迅速的响应能力。优化了Browser和Server之间的沟通，减小没必要要的数据传输、时间及下降网络上数据流量。

3.前端和后端负载平衡。

AJAX能够把之前一些服务器负担的工做转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。而且减轻服务器的负担，AJAX的原则是“按需取数据”，能够最大程度的减小冗余请求和响应对服务器形成的负担，提高站点性能。

4.基于标准被普遍支持。

AJAX基于标准化的并被普遍支持的技术，不须要下载浏览器插件或者小程序，但须要客户容许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。一样，也出现了另外一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

5.界面与应用分离。

Ajax使WEB中的界面与应用分离（也能够说是数据与呈现分离），有利于分工合做、减小非技术人员对页面的修改形成的WEB应用程序错误、提升效率、也更加适用于如今的发布系统。

缺点

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。

在动态更新页面的状况下，用户没法回到前一个页面状态，由于浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差异很是微妙；用户一般会但愿单击后退按钮可以取消他们的前一次操做，可是在Ajax应用程序中，这将没法实现。

2.AJAX的安全问题。

简单版：ajax暴露了浏览器与服务器交互的细节。

AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据创建了一个直接通道。这使得开发者在不经意间会暴露比之前更多的数据和服务器逻辑。Ajax的逻辑能够对客户端的安全扫描技术隐藏起来，容许黑客从远端服务器上创建新的攻击。还有Ajax也难以免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

3.对搜索引擎支持较弱。

对搜索引擎的支持比较弱。若是使用不当，AJAX会增大网络数据的流量，从而下降整个系统的性能。

4.破坏程序的异常处理机制。

至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程当中遇到过，可是查了一下网上几乎没有相关的介绍。后来作了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给咱们的调试带来了很大的困难。

5.违背URL和资源定位的初衷。

例如，我给你一个URL地址，若是采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不一样的。这个和资源定位的初衷是相背离的。

6.AJAX不能很好支持移动设备。

一些手持设备（如手机、PDA等）如今还不能很好的支持Ajax，好比说咱们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

7.客户端过肥，太多客户端代码形成开发上的成本。

编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的不少服务端代码如今放到了客户端）；破坏了Web的原有标准。

原生JS实现步骤

• 第一步，建立XMLHttpRequest对象（浏览器兼容性）
• 第二步，注册回调函数
• 第三步，建立请求，指定请求类型、地址、异步/同步
• 第四步，发送请求
• 第五步，异步获取响应数据
• 第六步，利用js与DOM进行页面局部刷新

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
复制代码

XHR对象（XMLHttpRequest）

是什么

一个为向服务器发送请求和解析服务器响应提供了流畅的接口。

属性

onreadystatechange

一个JavaScript函数对象，当readyState属性改变时会调用它。回调函数会在user interface线程中调用。

readyState

表示请求/响应过程的当前活动阶段

• 0：未初始化。还没有调用open()
• 1：启动。已经调用open()，还没有调用send()
• 2：发送。已经调用send()，还没有接收到响应
• 3：接收。已经收到部分响应数据
• 4：完成。已经收到所有响应数据

status

响应的HTTP 状态。

如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会致使一个异常。

statusText

HTTP 状态的说明。

当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性同样，当 readyState 小于 3 的时候读取这一属性会致使一个异常。

responseText

做为响应主体被返回的文本。

若是 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。若是 readyState 为 4，这个属性保存了完整的响应体。

responseXML

若是响应的内容类型是"text/xml"或"application/xml"，这个属性将保存着响应数据的XML DOM文档。

方法

open()

做用：初始化请求

xhr.open(method,url,async,user,password)

method 请求方式，如get,post,put等等
url 请求路径，能够是相对路径也能够是绝对
async 是否异步请求 传布尔值，默认true
user 用户名,可选参数,为受权使用;默认参数为空string.
password 密码,可选参数,为受权使用;默认参数为空string.
复制代码

send()

做用：发送请求

参数为发送的请求体，不传请求体的话最好传个null

setRequestHeader()

做用：设置请求头

参数两个，第一个请求体名称header，第二个要赋的值value

abort()

做用：取消当前响应，关闭链接而且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，而且取消全部未决的网络活动。例如，若是请求用了太长时间，并且响应再也不必要的时候，能够调用这个方法。

getResponseHeader()

做用：返回指定响应头的值

参数：响应头的名称

getAllResponseHeaders()

做用：返回全部头部信息的字符串

json字符串与json对象的相互转化

字符串转对象

JSON.parse(str)

eval('('+str+')')

// eval函数用于将字符串中的JS代码解析出来并执行！！     
   当使用eval函数解析JSON字符串时，须要在函数内部将JSON字符串用()拼接
   表示eval函数中的字符串不是用于执行，而是要进行字符串解析
复制代码

对象转字符串

JSON.stringify(obj)
复制代码

JQuery的Ajax

$.ajax({
    //请求方式
    type : "POST",
    //请求的媒体类型
    contentType: "application/json;charset=UTF-8",
    //请求地址
    url : "http://127.0.0.1/admin/list/",
    //数据，json字符串
    data : JSON.stringify(list),
    //是否用jsonp跨域
    dataType: ''
    //请求成功
    success : function(result) {
        console.log(result);
    },
    //请求失败，包含具体的错误信息
    error : function(e){
        console.log(e.status);
        console.log(e.responseText);
    }
});

复制代码

跨域问题

解释jsonp的原理，以及为何不是真正的ajax

Jsonp并非一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是经过动态建立script标签，而后经过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，须要事先在页面定义好回调函数，本质上使用的并非ajax技术

JSON

是什么

JavaScript Object Notation——javascript对象表示法

一种数据格式

面试题

Ajax面试题