jQuery大法第一式--Ajax技术

1、什么是ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

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

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

2、Ajax技术组成

(1)getJSON()方法

jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中

语法: 

$.getJSON(url,[data],[callback])

参数解释：

url参数：为请求加载json格式文件的服务器地址
可选项data参数：为请求时发送的数据
callback参数：为数据请求成功后执行的函数

 

$.getJSON("./data/getJSON.json", function (data) {
   var str = "";//初始化保存内容变量
   $.each(data, function(index,ele) {
   $('ul').append("<li>"+ele.name+"</li>")

   });
})

（2）$.get()方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据

语法：

$.get(URL,callback);

url参数：规定你请求的路径，是必需参数
callback参数：为数据请求成功后执行的函数

$.get('./data/getJSON.json',function(data,status){
    console.log(status);   //success    200状态码 ok的意思              
})

（3）post()方法

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面

语法：

$.post(URL,data,callback);

url参数：规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据
可选的callback参数：为数据请求成功后执行的函数

 $.post('/index',{name:'张三'},function(data,status){
      console.log(status);

 })

（4）$.ajax()方法（重要）

query的$.ajax()方法 是做ajax技术经常使用的一个方法。

 

参数如下： 

1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

 

　　xml：返回XML文档，可用JQuery处理。

　　html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

　　script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

　　json：返回JSON数据。

　   jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

　　text：返回纯文本字符串。

8.beforeSend： 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 } 9.complete：

要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }

10.success：

　　要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

　　(1)由服务器返回，并根据dataType参数进行处理后的数据。

　　(2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 

11.error: 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }

12.contentType： 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

14.dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

15.global： 要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified： 要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17.jsonp： 要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username： 要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password： 要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21.scriptCharset： 要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用

get()方法：

//get()方式
  $.ajax({
     url:'./data/index.txt',
     type:'get',
     dataType:'text',
     success:function(data){
        $('p').html(data);

     },
     error:function(error){
        console.log(error)
     }

post()方法：

//post()方式
$.ajax({
   url:'/index',
   type:'post',
   data:{name:'张三',age:12},
   success:function(data){
      $('p').html(data);
   },
   error:function(error){
      console.log(error)
}

（5）XMLHttpRequest()对象补充

有如下概念：

1.Ajax能够是实现异步传输，所依赖的就是JavaScript中的XMLHttpRequest

2.XMLHttpRequest对象是XMLHttp组件的对象，它是一个抽象对象，允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端

3.XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互，不必每次刷新页面

4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作为一个ActiveX控件提供，后受到广泛应用

5.在使用XMLHttpRequest发送请求和处理相应之前需要先创建一个XMLHttpRequest对象

6.XMLHttpRequest不是W3C标准，可采用多种方法用JavaScript来创建XMLHttpRequest实例

7.在IE中XMLHttpRequest实现为一个ActiveX控件，而其他浏览器则实现为一个JavaScript内置对象

（6）XMLHttpRequest对象属性（接收并显示当前状态）

1.readySate-记录返回请求的状态

。0-为初始化：对象已经建立，单位初始化，open方法还未调用；

。1-初始化：对象已经建立，但还未调用send方法发送请求；

。2-发送数据：send方法已调用，但HTTP头未知；

。3-数据传输中：已经接受部分数据，但响应不完全；

。4-完成：数据接受完成，此时才可以获取完整的返回数据

2.responseText-接收客户端的HTTP响应的文本内容

。只读

。当readySate为1/2，responseText值是一个空字符串；

。当readyState为3，响应信息正在接受还未完成；

。当readyState为4，表示可以响应信息已经接收完成

。xmlHttp默认响应数据编码为UTF-8

3.responseXML-在send（）执行后，将返回的信息格式化为XML Document对象

。Content-Type指定的MIME类型应该为text/HTML

。如果Content-Type不包含这种类型，responseXML在接收时将会得到一个null值

4.status-在send（）执行后，可使用status读取事物状态

。长整型数据

。返回当前请求的HTTP的状态码

。只有当readyState为3或4时才使用该属性，否则读取status会发生错误

。100-客户必须继续发送请求

。200-交易成功

。400-错误请求

。403-请求不允许

。404-没有发现文件、查询、URL

。500-服务器内部错误

。502服务器暂时不可使用

。505-服务器不支持或拒绝不支持请求头中的HTTP版本

5.statusText-send（）执行后，可通过statusText读取事物状态

。返回当前HTTP请求的状态行

。只有当readyState为3或4时才可使用该属性，否则读取state会发生错误

6.Onreadystatechange-readyState发生变化时所要执行的操作

。通常将处理函数名称赋予onreadystatechange来为XMLHttpRequest对象指定事件处理

。在事件处理函数中根据readyState的状态值进行相应的处理

//1、先创建 XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  console.log(xhr.readyState);

  // 2.做出响应之后会调用此方法  状态机
  xhr.onreadystatechange = function(){

      // if (true) {}

      if (xhr.readyState===4) {
          console.log(xhr.responseText)

          document.getElementById('content').innerHTML = xhr.responseText
    
      }

  }

  document.querySelector('#btn').onclick = function(){

      var username = document.getElementById('username').value;
      var pwd = document.getElementById('pwd').value;


     //3.初始化HTTP请求参数，但是并不发送请求。
  //第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步
    xhr.open('GET',`http://localhost:3000/signin1?username=${username}&pwd=${pwd}`,true);
  //使用post方式发送数据
  //xmlhttp.open("POST","http://localhost:3000/signin1",true);
  //post需要自己设置http的请求头
  //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // http://localhost:3000/signin?username=chyingp&pw=123456
      //发起请求 第一个参数 是请求的方式 大写  打开连接
  
    
    //4，发送数据，开始和服务器进行交互
      //发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
      //中如果true, send这句话会立即执行
      //如果是false（同步），send会在服务器数据回来才执行
      xhr.send(null);
      //因为是get所以send中不需要内容
      //xhr.send('name=' +username);

  }

 

 

本期学习到此结束，欢迎大家关注指教。