ajax学习笔记

前言

之前一直在学习ajax，但是在网上找了一部分课程发现不是太过于简单，就是具体的项目，这就需要了解PHP以及数据库。因此，特意去学习了一些相关的内容，之后会不断总结一些PHP和数据库相关的内容。

一、了解ajax

1.什么是ajax？

​ AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：

使用XHTML+CSS来标准化呈现；
使用XML和XSLT进行数据交换及相关操作；
使用XMLHttpRequest对象与Web服务器进行异步数据通信；
使用Javascript操作Document Object Model进行动态显示及交互；
使用JavaScript绑定和处理所有数据。

2.使用场景：

（1）表单提交（注册、登录）；

（2）tab切换（局部刷新）；

（3）加入购物车

…

3.作用：局部刷新。

4.意义：

​ 没有使用ajax时，填写完整个表单之后，客户端发出请求，等待响应。而服务器处理请求，发出响应，如果填写有错误的话，客户修改后，又需要重新发送请求等待响应。

​ 使用ajax时，在客户端填写表单时，会实时刷新，不用发送请求，等待响应。如果填错了，就会及时提醒。

二、ajax优缺点

1.优点

（1）使用异步方式与服务器通信，页面不需要重新加载，页面无刷新；

（2）按需取数据，减少服务器的负担；

（3）使得Web应用程序更为迅捷地响应用户交互，用户体验好；

（4）AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行；

（5）浏览器的内容和服务端代码进行分离。页面的内容全部由JAVAScript来控制，服务端负责逻辑的校验和从数据库中拿数据。

2.缺点

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

​ 后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。

（2）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的原有标准。

三、ajax工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

​ Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载（白屏）的等待。

1.XMLHTTPRequest

​ Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。

XMLHttpRequest 对象属性描述

属 性	描 述
onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，返回数据的文本。
responseXML	服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。
responseBody	服务器返回的主题（非文本格式）
responseStream	服务器返回的数据流
status	服务器的HTTP状态码（如：404 = “文件末找到” 、200 =”成功” ，等等）
statusText	服务器返回的状态文本信息 ，HTTP状态码的相应文本（OK或Not Found（未找到）等等）

2.兼容问题

虽然说现在已经不需要考虑IE5、6了，但是还是要知道这种写法什么意思。

var request;
if(window.XMLHttpRequest){
   request = new XMLHttpRequest(); IE7+、其它
}else{
   request = new ActiveXObject("Microsoft.XMLHTTP");   兼容IE6、IE5
}

3.status状态码总结

状态码	描述
100	客户必须继续发出请求
101	客户要求服务器根据请求转换HTTP协议版本
200	交易成功
201	提示知道新文件的URL
202	接受和处理、但处理未完成
203	返回信息不确定或不完整
204	请求收到，但返回信息为空
205	服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206	服务器已经完成了部分用户的GET请求
300	请求的资源可在多处得到
301	删除请求数据
302	在其他地址发现了请求数据
303	建议客户访问其他URL或访问方式
304	客户端已经执行了GET，但文件未变化
305	请求的资源必须从服务器指定的地址得到
306	前一版本HTTP中使用的代码，现行版本中不再使用
307	申明请求的资源临时性删除
400	错误请求，如语法错误
401	请求授权失败
402	保留有效ChargeTo头响应
403	请求不允许
404	没有发现文件、查询或URl
405	用户在Request-Line字段定义的方法不允许
406	根据用户发送的Accept拖，请求资源不可访问
407	类似401，用户必须首先在代理服务器上得到授权
408	客户端没有在用户指定的时间内完成请求
409	对当前资源状态，请求不能完成
410	服务器上不再有此资源且无进一步的参考地址
411	服务器拒绝用户定义的Content-Length属性请求
412	一个或多个请求头字段在当前请求中错误
413	请求的资源大于服务器允许的大小
414	请求的资源URL长于服务器允许的长度
415	请求资源不支持请求项目格式
416	请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417	服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500	服务器产生内部错误
501	服务器不支持请求的函数
502	服务器暂时不可用，有时是为了防止发生系统过载
503	服务器过载或暂停维修
504	关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505	服务器不支持或拒绝支请求头中指定的HTTP版本

四、原生JS中使用ajax

1.get请求

document.getElementById("search").onclick = function () {
        var request = new XMLHttpRequest();
        request.open("GET","./php/service.php?number=" + document.getElementById("keyWord").value);
        request.send(null);
        request.onreadystatechange = function () {
            if(request.readyState == 4 && request.status == 200){
                document.getElementById("searchResult").innerHTML = request.responseText;
            }
        }
    }

2.post请求

注：post请求需要设置请求头setRequestHeader。

document.getElementById("save").onclick = function () {
       var request = new XMLHttpRequest();
       var data = "name="+document.getElementById("staffName").value  +
           "&number="+document.getElementById("staffNumber").value +
           "&gender="+document.getElementById("staffGender").value +
           "&job="+document.getElementById("staffJob").value;
       request.open("POST","./php/service.php");
       request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       request.send(data);
       request.onreadystatechange = function () {
           if(request.readyState == 4 && request.status == 200){
               document.getElementById("saveContent").innerHTML = request.responseText;
           }
       }
}

五、jQuery中使用ajax

1.$.get()

定义：$.get() 方法使用 HTTP GET 请求从服务器加载数据。

语法

$.get(URL,data,function(data,status,xhr),dataType)

参数	描述
URL	必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： data - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。 以 JSON 运行响应，并以 JavaScript 对象返回

$.get("./php/get.php",{"username":"lily"},function (data) {
    console.log(data);
},"json")

2.$.post()

定义：$.post() 方法使用 HTTP POST 请求从服务器加载数据。

语法和$.get()相同

3.load()

定义：从服务器加载数据，并把返回的数据放置到指定的元素中。

$("#submit").on("click",function () {
    $(".dv").load("./php/get.php");
})

4.getJSON()

定义：使用 HTTP GET 请求从服务器加载 JSON 编码的数据。

$("#submit").on("click",function () {
    $.getJSON("./php/get.php",function (data) {
        console.log(data);   //data 必须是json格式的数据才有效
    })
 })

5.getScript()

定义：使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript（远程载入一段JS脚本）。

$("#submit").on("click",function () {
    $.getScript("js/getScript.js");   //远程载入一段JS脚本
})

6.$.ajax()

定义：ajax() 方法用于执行 AJAX（异步 HTTP）请求。

相关参数：

名称	值/描述
async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。
context	为所有 AJAX 相关的回调函数规定 “this” 值。
data	规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
password	规定在 HTTP 访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
success(result,status,xhr)	当请求成功时运行的函数。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET 或 POST）。
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP 访问认证请求中使用的用户名。
xhr	用于创建 XMLHttpRequest 对象的函数。

$("#submit").on("click",function () {
   $.ajax({
       type:"post",
       url:"./php/get.php",
       data:{
           "username":"tina",
           "age":"12"
        },
       success:function (data) {
            console.log(data);
       }

   })
})

7.$.getJSON和 $.ajax 之间的区别

（1）$.getJSON 只能是get请求，但是它获得的数据是json对象，不需要通过JSON.parse转换。

$.getJSON({
    type:"GET",
    url:"",
    success:function(data){
        console.log(typeof data);  //输出object
    }
})

（2）$.ajax 既可以是get请求，也可以是post请求。但它一开始获取的数据是json字符串，必须要使用方法JSON.parse转换为json对象。

$.ajax({
    type:"GET",
    url:"",
    success:function(data){
        console.log(typeof data);  //输出string
      
   		var obj = JSON.parse(data);
        console.log(typeof obj);  //输出object
    }
})

8.将json字符串转换为json对象

（1） eval():不光解析json,还会解析中的方法，比较危险。

var jsonString = '{"staff":[{"name":"lily","age":12},{"name":"tina","age":12}]}';
console.log(typeof jsonString);    //string
var jsonObj = eval('('+jsonString+')');
console.log(typeof jsonObj);       //object

（2）JSON.parse 推荐这种方法

var jsonString = '{"staff":[{"name":"lily","age":12},{"name":"tina","age":12}]}';
console.log(typeof jsonString);    //string
var jsonObj = JSON.parse(jsonString);
console.log(typeof jsonObj);       //object

9.将json对象转换为json字符串

(1) JSON.stringify()

var jsonString = '{"staff":[{"name":"lily","age":12},{"name":"tina","age":12}]}';
console.log(typeof jsonString);    //string
var jsonObj = JSON.parse(jsonString);
console.log(typeof jsonObj);       //object
var jsonString1 = JSON.stringify(jsonObj);
console.log(typeof jsonString1);   //string

参考相关文章：

AJAX工作原理及其优缺点

赏

谢谢你请我吃糖果