ajax用js还是jQuery,使用原生JS和jQuery搞定Ajax

一、原生JS

说到Ajax，不得不先提一下HTTP(HTTP，HyperText Transfer Protocol)协议，中文名：超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。一次HTTP请求，包含了两个重要的部分：上行request(请求)和下行response(响应)。

HTTP协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT,DELETE就对应着对这个资源的查，改，增，删4个操作。 我们最常见的(也是我们关心的)就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。

我们看看GET和POST的区别：

GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.

GET提交的数据大小有限制(因为浏览器对URL的长度有限制，本身并没有限制)，而POST方法提交的数据没有限制。

GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码。

如果你使用chrome浏览器的话，可以再下面的页面中看到这两种请求携带的信息:

通常，浏览器产生HTTP请求，是由于用户输入了新的网址、或者点击了超级链接，使页面跳转，这将导致页面的全局刷新。而Ajax(Asynchronous Javascript And XML：异步JavaScript和XML)技术，可以使网页悄悄地、偷偷地发起HTTP请求，请求回来的数据在页面局部刷新呈递。ajax的使用其实很简单：

第一步，new出一个XMLHttpRequest对象：

这里变量名xhr可以随便起，只是一般工程师都喜欢使用这个名字，就像var arr一样，姑且当做一种约定俗成的东西就好，方便大家交流。第二步，处理服务器上面返回的响应：

其中，if语句小括号中的的语句：readyState表示返回XMLHTTP请求的当前状态，具体数值示意如下：

0、未初始化

对象已建立，但是尚未初始化(尚未调用open方法)

1、初始化

已调用send()方法，正在发送请求

2 、发送数据

send方法调用完成，但是当前的状态及http头未知

3 、数据传送中

已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4、完成

数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据

第三步，创建一个请求，第一个参数是请求的类型get或者post，第二个参数就是请求的路径，第三个参数叫做是否使用异步机制：

如果是post请求，在发送请求前需要做以下处理：

第四步，发送请求：

总结一下：

1 //Ajax的一个固定的模板：

2 //第1步创建一个xhr对象，使用new关键来调用一个内置构造函数

3 var xhr = new XMLHttpRequest();

4 //第2步指定接收回来的内容，怎么处理。监听xhr对象的onreadystatechange事件，这个事件在xhr对象的“就绪状态”改变的时候触发。我们只关心就绪状态为4的时候的事情。

5 xhr.onreadystatechange = function(){

6 if(xhr.readyState == 4){

7 //接收完文件要做的事情，让h1的内容变为读取的东西

8 biaoti.innerHTML = xhr.responseText;

9 }

10 }

11

12 //第3步创建一个请求，第一个参数是请求的类型get或者post，第二个参数就是请求的路径，第三个参数叫做是否使用异步机制

13 xhr.open("get","a.txt",true);

14 //第4步发送请求，圆括号里面是请求头内容，get请求没有报文头写null

15 xhr.send(null);

如果是post，对应如下修改：

1. xhr.open("post","do2.php",true);

2. //如果用post发送请求，那么必须写一句话，模拟成form表单提交：

3. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4. xhr.send("xingming="+encodeURIComponent("枫")+"&age=18");

二、jQuery

1.1 $.get()方法

1 $.get("a.json" , {"id":1,"name":"考拉"} , function(text){

2 alert(typeof text);

3 });

jQuery默默的帮我们：

1) encodingURIComponent中文了；

2) 如果请求是404等错误状态，不会执行回调函数；

3) jQuery识别传回来的东西像JSON，已经帮我们转JSON了，

jQuery中get方法还可以这样使用两个参数：

1 $.get("a.json?id=1&name=枫", function(text){

2 alert(typeof text);

3 });

1.2 $.post()方法

1 $.post("a.json",{"id":1,"name":"枫"},function(data){

2 alert(typeof data);

3 alert(data.content[2].id);

4 });

1.3 $.ajax()方法

配置信息非常多，写在json里面进行配置：

1 $.ajax("b.json",{

2 //请求类型

3 "type" : "get",

4 //传到服务器上的数据

5 "data" : {

6 "name":"xiaoming",

7 "age" :10

8 },

9 //成功做的事情

10 "success" : function(data){

11 alert(typeof data);

12 },

13 //错误做的事情

14 "error": function(XMLHttpRequest, textStatus, errorThrown){

15 alert(errorThrown);

16 }

17 });