Ajax的基本使用

Js学习笔记之Ajax的基本使用

一、Ajax

1. 基本概念

• Ajax是浏览器的一套异步API，通过JavaScript调用，可以让我们不用刷新浏览器就可以获取服务器的数据，进行数据的请求和响应。

• 原理：通过一个XmlHttpRequest对象，想服务器发起请求，发起请求readstate有0,1,2,3,4种状态，当状态为4的时候，就表示接收到了完整的响应数据。这时候，再对数据进行操作，渲染到页面当中。

  0-链接建立；1–初始化，send未调用；2–send已经调用，状态和http头未知；3–接受了部分响应数据，未完整

• 基本步骤：

  1. 创建一个xhr代理对象
  2. xhr打开一个链接通道
  3. 发送请求
  4. 根据响应状态来进行操作，当readystate=4 的时候，表示响应体下载完毕，可以对响应体进行处理

2. 使用

1. 基本使用

  var xhr = new XMLHttpRequest()
      xhr.open('GET', 'www.url.com')
      xhr.send()
      xhr.onreadystatechange = function () {
        // 这个事件并不是只在响应时触发，XHR 状态改变就触发
        if (this.readyState !== 4) return
        // 获取响应的内容（响应体）
        console.log(this.responseText)
      }

2. Jquery中的使用

   $.ajax({
        url: 'www.url.com',
        type: 'GET', //请求方式GET/POST/(部分浏览器支持PUT/DELETE)
        beforeSend: function (xhr) {
          // 在所有发送请求的操作（open, send）之前执行
          console.log('beforeSend', xhr)
        },
        success: function (res) {
          // 隐藏 loading
          // 只有请求成功（状态码为200）才会执行这个函数
          console.log(res)
        },
        error: function (xhr) {
          // 隐藏 loading
          // 只有请求不正常（状态码不为200）才会执行
          console.log('error', xhr)
        },
        complete: function (xhr) {
          // 不管是成功还是失败都是完成，都会执行这个 complete 函数
          console.log('complete', xhr)
        }
      })

二、JSONP

1. 原理

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。用于解决跨域请求的问题。

JSONP只支持GET方法，即使是jQuery设置type为jsonp也只会进行GET请求。

其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一
段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。

---

1. 在浏览器定义一个函数

<script>
   function myonload (data) {
     console.log(data);
   };  
 </script>

2. 在请求php文件中传回来一段js代码。需要的数据，并且将数据作为实数，调用浏览器定义好的函数

//data 是浏览器请求的数据
var data = {
    time: Date.now()
  };
//将data作为实参传入函数myonload中，进行函数调用
//浏览器收到的就是，函数执行后的结果
  myonload(data);

2. Jquery中的使用

• 需要设置dataType : 'jsonp'
• 需要指定一个callback函数名jsonpCallback : 'callbackname'

 $.ajax({
      url: 'http://localhost/jsonp/server.php',
      dataType: 'jsonp',
      success: function (res) {
        console.log(res)
      }
    })

3. 解决跨域CROS方法

1. 在服务端正常输出json格式数据

2. 设置允许跨域请求：

  header('Access-Control-Allow-Origin: *')
  // * 表示所有域都可以
  //也可以指定某个域 Access-Control-Allow-Origin: http://www.a.com