原生js与JQuery的ajax请求

快来打我* 2022-11-27 03:08 146阅读 0赞

### 原生js的ajax请求 ###

**1.创建XMLHttpRequest对象**

var xhr=new XMLHttpRequest();

**2.准备发送请求 open()**

xhr.open('请求类型','url地址',是否异步);

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>请求类型</td> 
   <td>GET 或 POST</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>文件在服务器上的地址</td> 
  </tr> 
  <tr> 
   <td>是否异步</td> 
   <td>true(异步) / false(同步)</td> 
  </tr> 
 </tbody> 
</table>

**3.发送请求数据 send()**

xhr.send();

**4.请求返回的回调函数**  
当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。

xhr.onreadystatechange=function(){
    	if(xhr.readyState==4 && xhr.status==200){
    		console.log(xhr.responseText) 
    	}
    }

readyState状态码

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onreadystatechange</td> 
   <td>存储函数(或函数名)，每当readyState属性改变时就会调用该函数</td> 
  </tr> 
  <tr> 
   <td>readyState</td> 
   <td>存有XMLHttpRequest的状态，从0-4发生变化 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成且响应已就绪</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td>200：‘OK’ 404:未找到页面</td> 
  </tr> 
 </tbody> 
</table>

#### 实例： ####

get请求：

//步骤一:创建异步对象
    var ajax = new XMLHttpRequest();
    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
    ajax.open('get','getStar.php?starName='+name);
    //步骤三:发送请求
    ajax.send();
    //步骤四:注册事件 onreadystatechange 状态改变就会调用
    ajax.onreadystatechange = function () {
       if (ajax.readyState==4 &&ajax.status==200) {
        //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
    　　　　console.log(xml.responseText);//输入相应的内容
      　　}
    }

post请求：

//创建异步对象  
    var xhr = new XMLHttpRequest();
    //设置请求的类型及url
    //post请求一定要添加请求头才行不然会报错
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
     xhr.open('post', '02.post.php' );
    //发送请求
    xhr.send('name=fox&age=18');
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      } 
    };

**方法封装：**

### JQuery的ajax请求 ###

**$.ajax()**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>链接地址，字符串表示</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>“POST” 或 “GET”，请求类型</td> 
  </tr> 
  <tr> 
   <td>timeout</td> 
   <td>请求超时时间，单位为毫秒，数值表示</td> 
  </tr> 
  <tr> 
   <td>cache</td> 
   <td>是否缓存请求结果，bool表示</td> 
  </tr> 
  <tr> 
   <td>contentType</td> 
   <td>内容类型，默认为"application/x-www-form-urlencoded"</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td>服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>请求成功后，服务器回调的函数</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>请求失败后，服务器回调的函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用</td> 
  </tr> 
  <tr> 
   <td>async</td> 
   <td>是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行</td> 
  </tr> 
  <tr> 
   <td>username</td> 
   <td>访问认证请求中携带的用户名，字符串表示</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>返回认证请求中携带的密码，字符串表示</td> 
  </tr> 
 </tbody> 
</table>

eg：

$.ajax({
        url: "/greet",
        data: {name: 'jenny'},
        type: "POST",
        dataType: "json",
        success: function(data) {
            // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
            ...
        }
    });

**$.post()**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>链接地址</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>需要发送到服务器的数据</td> 
  </tr> 
  <tr> 
   <td>function</td> 
   <td>请求成功后，服务器回调的函数</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td>服务器返回数据的格式</td> 
  </tr> 
 </tbody> 
</table>

eg：

$.post(
        "/greet",
        {name: 'Brad'},
        function(data) {
            ...
        },
        "json"
    );

**$.get()**

参数所示意义与$.post()一致

$.get(
        "/greet",
        {name: 'Brad'},
        function(data) {
            ...
        },
        "json"
    );

**$.getJSON()**  
该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。

$.getJSON(
        "/greet",
        {name: 'jenny'},
        function(data) {
            ...
        }
    );

**$.load()**  
该方法将服务器加载的数据直接插入到指定DOM中。

<div id="box"></div>
    $('#box').load(
        "/greet",
        {name: 'Brad'}
    );

**$.getScript()**  
该方法使用GET方式执行Ajax请求，从服务器加载并执行回传的JavaScript。

$.load(url, func);