JSONP和AJAX没有半毛钱关系

2018-04-09 本文已影响71人 squall1744

Jsonp 和 Ajax 有个毛关系啊！！！

这一点非常重要啊

大概是jQuery把Jsonp放到了ajax API里面, 所以很多人总认为JSONP是AJAX的一种

但是, 一定要记住
JSONP和AJAX没有半毛钱关系
JSONP和AJAX没有半毛钱关系
JSONP和AJAX没有半毛钱关系
JSONP和AJAX没有半毛钱关系
JSONP和AJAX没有半毛钱关系
JSONP和AJAX没有半毛钱关系

这样应该就能记住了吧。。。。

JSONP

JSONP利用的是script发送请求的原理
说白了就是我们利用script标签可以通过向src中填的地址发送get请求这个特点, 创建一个动态的script标签, 然后用这个标签向服务器发送一个请求的一种方法

假设
请求方: frank.com的前端程序员(浏览器)
响应方: jack.com的后端程序员(服务器)

请求方创建script, src指向响应方, 同时传一个查询参数 ?callback=xxx
响应方根据查询参数callback, 构造形如
xxx.call(undefined, '数据')
这样的响应
浏览器接收到响应, 就会执行xxx.call(undefined, ‘数据’)
那么请求方就知道了他要的数据

这就是 JSONP

约定:

callbackName -> callback
xxx -> 随机数,

完整的JSONP请求如下

let script = document.createElement('script')
let functionName = 'ss' + parseInt(Math.random()*100000)


//接收到响应后我们要执行的代码, result就是我们接收到的响应数据
window[functionName] = function(result) {
  ...
}


//发送请求的地址和参数
script.src = 'http://jack.com:8002/pay?callback=' + functionName


//script便签只有在页面中才会执行, 所以我们把他添加到body下
document.body.appendChild(script)


//当成功得到响应并执完代码后, 销毁动态script标签, 表示此次http通讯完成
script.onload = function(e){
  e.currentTarget.remove()
}

//当响应失败时, 同样销毁动态script标签, 表示此次http通讯完成
script.onerror = funciont(e){
  e.currentTarget.remove()
}

用jQuery则更简单

$.ajax({
  url: 'http://jack.com:8002/pay',
  dataType: 'Jsonp',
  success: function(response) {
    ...
  }
})

Jsonp为什么不支持POST请求?

Jsonp通过动态创建script来实现的
script只能发送get请求, 没办法发送post请求

AJAX

AJAX (async JavaScript and XML)异步的 JavaScript 和 XML

首先我们来总结一下, 我们在html中可以通过哪些方法发送请求

用 form 可以发送请求, 但是会刷新或者新开页面
用 a 可以发 get 请求, 但也会刷新页面或新开页面
用 img 可以发送 get 请求, 但是只能以图片的形式展开
用 link 可以发送 get 请求, 但是只能以 CSS 和 favicon 的形式展示
用 script 可以发送 get 请求, 但是只能以脚本的形式运行, 这个就是JSONP的原理

那么, 有什么方法可以实现以下需求呢

发送 get、post、put、delete 任意一种请求
想用什么形式展示就用什么形式展示

微软牛逼了

IE5 的时候, 微软在JS中引入了ActiveX对象, 可以让JS直接发起HTTP请求, 这个技术在当时可算是一个牛逼炸了的功能, 这让我们可以很方便的在浏览器发送HTTP请求
随后Mozilla、safari、Opera等当时浏览器界的大佬们也抄袭了微软, 弄了一个XMLHttpRequest对象, 并被纳入W3C标准

AJAX产生了

Jesse James Garrett 将如下技术取名 AJAX: 异步的 JavaScript 和 XML

使用 XMLHttpRequest 发请求
服务器返回 XML 格式的字符串(现在主要使用 JSON 格式)
JS解析 XML 格式字符串(现在基本上都是解析 JSON 格式字符窜), 并更新局部页面

这里有一点需要强调, 服务器返回的响应体是字符串, 并不是什么对象或者其他乱七八糟的东西, 就是字符串

如何使用XMLHttpRequest

最简单的AJAX请求

let xhr = new XMLHttpRequest() //创建一个AJAX请求对象
xhr.open('GET', '/xxx') //初始化HTTP请求, 包括但不限于用什么方法, url
xhr.send() //发送HTTP请求

xhr.onreadystatechagne() 这个方法是监听readystate改变的方法, 很好用

readyState的五种状态

对于readyState的五种状态的描述或者说定义，很多Ajax书（英文原版）中大都语焉不详

比较理想的解释方法应该以“状态：任务（目标）+过程+表现（或特征）”的表达模式来对这几个状态进行定义

readyState状态	状态说明
(0)未初始化	此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
(1)载入	此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成	此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互	此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成	此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

由于 readystate 有这么多状态, 所以我们可以通过监听 readystate 的状态的改变, 获取改变后的readystate值, 并利用这个值判断请求是否发送成功

所以我们完善一下上面的AJAX请求

let xhr = new XMLHttpRequest()

//监听readystate改变
xhr.onreadystatechange = () => {

  //readyState变为4说明响应已完毕
  if(xhr.readyState === 4) {

    //http状态码为2xx说明接收响应成功
    if(xhr.status >= 200 && xhr.status < 300) {
      console.log(xhr.responseText)

    //http状态码大于等于400说明接收响应失败
    } else if(xhr.status >= 400) {
      console.log('error')
    }
  }
  xhr.open('GET', '/xxx') //初始化HTTP请求, 包括但不限于用什么方法, url
  xhr.send() //发送HTTP请求
}

通常response返回的都是一个符合JSON格式的字符串

JSON

JSON(JavaScript Object Natation)是一种轻量级的数据交换语言, 是JavaScript的子集, 这里要注意, JSON不是编程语言, 所以没有变量, 引用, 判断, 循环等语法

JSON 没有 functon和 undefined

JSON的字符串必须是"

JSON表示对象, key必须以双引号括起来

{"name": "Adam"}

JSON的格式举例

“abv” //字符串

123 //数字

null //null

{
  “name”: "Adam"
} //对象

["a", "b", "c"] //数组

有兴趣研究JSON的请点这里, 反正JSON所有的内容也就5分钟就学完了

还是上面的请求

let xhr = new XMLHttpRequest()

//监听readystate改变
xhr.onreadystatechange = () => {

  //readystate变为4说明响应已完毕
  if(xhr.readyState === 4) {

    //http状态码为2xx说明接收响应成功
    if(xhr.status >= 200 && xhr.status < 300) {
      console.log(xhr.responseText)

    //http状态码大于等于400说明接收响应失败
    } else if(xhr.status >= 400) {
      console.log('error')
    }
  }
  xhr.open('GET', '/xxx') //初始化HTTP请求, 包括但不限于用什么方法, url
  xhr.send() //发送HTTP请求
}

假设我们发送请求后, 服务器给我们返回的是 JSON 格式的字符串

{
  "note": {
    "to": "Eve",
    "from: "Adam",
    "heading": "Hello",
    "content": "hi"
  }
}

上面的是字符串啊, 记住是字符串啊！！！！！！！

所以我们需要用JSON.parse()将符合 JSON 格式的字符串转换成JavaScript对应的值, 上面的响应内容将会转化成对象.

这里又有个关于JSON的误区, 很多人认为JSON.parse()转换回来的都是对象, 这个其实是错的, 只不过大多数后端传回来的 JSON 格式字符串都是符合对象的写法, 所以将字符串转换后才是对象, 如果响应回来的字符串符合数组格式, 那么转换回来的就是数组

let Object = JSON.parse(xhr.responseText)

所以完整的AJAX请求如下

let xhr = new XMLHttpRequest()

//监听readystate改变
xhr.onreadystatechange = () => {

  //readyState变为4说明响应已完毕
  if(xhr.readyState === 4) {

    //http状态码为2xx说明接收响应成功
    if(xhr.status >= 200 && xhr.status < 300) {
      let Object = JSON.parse(xhr.responseText)
      console.log(Object)

    //http状态码大于等于400说明接收响应失败
    } else if(xhr.status >= 400) {
      console.log('error')
    }
  }
  xhr.open('GET', '/xxx') //初始化HTTP请求, 包括但不限于用什么方法, url
  xhr.send() //发送HTTP请求
}

XMLHttpRequest设置请求头

上面的例子是最典型的AJAX请求, 但是有些场景, 我们需要对请求头的内容进行设置

XMLHttpRequest.setRequestHeader() 是设置HTTP请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。

语法

myReq.setRequestHeader(header, value)

参数
header
属性的名称。
value
属性的值。

XMLHttpRequest设置请求体

XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

语法

void send();
void send(ArrayBuffer data);
void send(ArrayBufferView data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

如果发送的数据是Document对象，需要在发送之前将其序列化。当发送一个Document对象时，Firefox 3之前的版本都是使用utf-8编码发送请求的；FireFox 3则使用由body.xmlEncoding指定的编码格式正确的发送文档，但如果未指定编码格式，则使用utf-8编码格式发送。

如果是一个nsIInputStream接口,它必须与nsIUploadChannel的setUploadStream（）方法兼容。在这种情况下，将 Content-Length的头部添加到请求中，它的值则使用nsIInputStream接口的available（）方法获取。任何报头包括在数据流顶部的都会被当做报文主体。所以，应该在发送请求即调用send（）方法之前使用setRequestHeader() 方法设置 Content-Type头部来指定数据流的MIME类型。

发送二进制内容的最佳方法（如上传文件）是使用一个与send（）方法结合的 ArrayBufferView 或者Blobs

案例: GET

const xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.onload = function () {
   // 请求结束后,在此处写处理代码
};

xhr.send(null);
// xhr.send('string');
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send({ form: 'data' });
// xhr.send(document);

案例: POST

const xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {//Call a function when the state changes.
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        // 请求结束后,在此处写处理代码
    }
}
xhr.send("foo=bar&lorem=ipsum"); 
// xhr.send('string'); 
// xhr.send(new Blob()); 
// xhr.send(new Int8Array()); 
// xhr.send({ form: 'data' }); 
// xhr.send(document);

同源策略与跨域

之前见到一个问题, 为什么表单可以跨域而AJAX不能跨域请求呢?

这是因为原页面用form提交到另一个域之后, 原页面的脚本无法获取新页面的内容, 所以浏览器认为是安全的。而AJAX是可以读取响应内容的, 因此浏览器不能允许你这样做。

这个问题就引出了我们这一段的主题, 同源策略和跨域

将跨域前要先说一下同源策略

同源策略

假设我们的域名为http://www.baidu.com:80

通常情况下我们只能在 http://www.baidu.com:80 这个域中向 http://www.baidu.com:80 这个域的其他路径发送AJAX请求, 如果我们给 http://www.qq.com:80 这个域发送AJAX请求, 浏览器就会拒绝这个请求, 这就是浏览器的同源策略

同源策略只对AJAX有效

什么样才叫同源呢?

只有协议+域名+端口一模一样的才是同源

同源
http://www.baidu.com:80/index 和 http://www.baidu.com:80/main.js 是同源

非同源

http://www.baidu.com:80 和 http://www.baidu.com:8080 不是同源
http://www.baidu.com:80 和 https://www.baidu.com:8080 不是同源
http://baidu.com:80 和 http://www.baidu.com:8080 不是同源

跨域

就是请求发送方向不是同源的接收方发送请求

如何发送跨域请求

JSONP 可以发送跨域请求
CORS跨域

CORS跨域

在后台的响应头中设置Access-Control-Allow-Origin即可, 假设我们的地址是 http://adam.com:80 我们可以告诉浏览器, 我们允许 http://frank.com:8080 这个域给我们发送跨域AJAX请求, 我们可以在响应头中这么设置

response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8080')

这样 http://frank.com:8080 这个域就可以给我们发送跨域AJAX请求了

今天的主题讲完啦, 我们下面运用今天的知识来自己封装一个AJAX

封装一个AJAX

第一版就是最简单的封装, 接收五个参数

window.jQuery = function(node){
    let nodes = {
        0: node,
        length: 1
    }
    return {
        addClass: function(){

        }
    }
}

window.jQuery.ajax = function(url, method, body, successFn, failFn) {
  let xhr = new XMLHttpRequest()
  xhr.open(method, url)
  xhr.onreadystatechange = () => {
    if(xhr.readyState === 4) {
      if(xhr.status >= 200 && xhr.status < 300) {
          successFn.call(undefined, xhr.responseText)
      }else if(xhr.status >= 400) {
        failFn.call(undefined, xhr)
      }
    }
  }
  xhr.send(body)
}

window.$ = window.jQuery

我们在第一版的基础上一行把参数改为接收一个对象

window.jQuery = function(node){
    let nodes = {
        0: node,
        length: 1
    }
    return {
        addClass: function(){

        }
    }
}
window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}) {
  let xhr = new XMLHttpRequest()
  xhr.open(method, url)
  for(let key in headers) {
    xhr.setRequestHeader(key, headers[key])
  }
  xhr.onreadystatechange = () => {
    if(xhr.readyState === 4) {
      if(xhr.status >= 200 && xhr.status < 300) {
          successFn.call(undefined, xhr.responseText)
      }else if(xhr.status >= 400) {
        failFn.call(undefined, xhr)
      }
    }
  }
  xhr.send(body)
}

window.$ = window.jQuery

在第二版的基础上用promise封装一下, 让我们可以通过then来调用成功和失败后的函数

window.jQuery = function(node){
    let nodes = {
        0: node,
        length: 1
    }
    return {
        addClass: function(){

        }
    }
}

window.jQuery.ajax = function({url, method, body, headers}) {
  return new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest()

    xhr.open(method, url)
    for(let key in headers) {
      xhr.setRequestHeader(key, headers[key])
    }
    xhr.onreadystatechange = () => {
      if(xhr.readyState === 4) {
        if(xhr.status >= 200 && xhr.status < 300) {
          resolve.call(undefined, xhr.responseText)
        }else if(xhr.status >= 400) {
          reject.call(undefined, xhr)
        }
      }
    }
    xhr.send(body)
  })
}

window.$ = window.jQuery