13-jQuery的ajax

什么时ajax?

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）

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

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

1,jQuery的load()方法:

jQuery load()方法是简单但强大的AJAX方法。

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

ps:该方法使用不多，了解即可

语法：

$("selector").load(url, data, callback);

第一种情况

$('#btn').click(function(){

    //只传一个url，表示在id为#new-projects的元素里加载index.html
    $('#new-projects').load('./index.html');
})

第二种情况

$('#btn').click(function(){
    //只传一个url，导入的index.html文件含有多个传递参数，类似于：index/html?name='张三'
    $('#new-projects').load('./index.html',{"name":'张三',"age":12});
})

第三中情况

//加载文件之后，会有个回调函数，表示加载成功的函数
    $('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){

});

2,jquery的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>")

          });
       })

3, jquery的$.get()方法

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

语法:

$.get(URL, callback);

url参数: 规定你请求的路径,时必需参数

callback参数: 为数据请求成功后执行的函数

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

 

4,jquery的post()方法

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

语法:

$.post(URL, data, callback);

url餐宿: 规定你请求的路径,时必需参数,可选的data参数时连通请求发送的数据可选的callback参数: 为数据请求成功之后执行的函数

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

5,jquery的$.ajax方法(重要)

query的$.ajax()方法 是做ajax计数经常使用的一个方法.

它的参数很多,总会有一些初学者记不住,在这里,演示几个经常使用的参数.后面讲django课程部分会详细使用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后,防止这种自动转换,可以查看processDate现象.对象必须为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将自动替换一个"?"为正确的函数名,以执行回调函数

8,beforeSend: 要以为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头.在beforeSend中如果返回false可以取消本次ajax请求.XMLHttpRequest对象时唯一的参数.function(XMLHttpRequest){this; //调用本次ajax请求时传递的option参数} 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)
    } 
})

ps:

注意: 以上所有操作,请在服务器上运行代码,如果没有服务器,可以在本地搭建本地服务器.

 

XMLHttpRequest()对象补充

有如下概念:

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

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

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

4,XMLHttprequest最早在Microsoft Internet Explorer5.0中作为一个Active控件提供,后收到广泛应用

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

6,XMLHttpRequest不是W3C标准,可采用多种方法用JavaScript来创建XMLHttpRequest

实例

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

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);

  }

 

好吧！！咱们还没学，我们可以使用PCCharm,WebStrom,HBuilder上运行此代码。但是post请求的方法 我们暂时没法演示，
后面在django部分讲到服务器的知识点后，会给大家详细演示get请求和post请求的处理。