JSON,JSONP,AJAX简述

发表于

前言：一个网站如果要完整的运行出来，必须要前端与后端结合。本文就简略的介绍一下这几个技术：JSONP、JSON、AJAX。

1、如何发请求

  • 用 form 可以发请求，但是会刷新页面或新开页面
  • 用 a 可以发 get 请求，但是也会刷新页面或新开页面
  • 用 img 可以发 get 请求，但是只能以图片的形式展示
  • 用 link 可以发 get 请求（必须放在head中)，但是只能以 CSS、favicon 的形式展示
  • 用 script 可以发 get 请求（需要放在head或body中），但是只能以脚本的形式运行

以上方法除了form 都无法实现get、post、put、delete 等请求都行，想以什么形式展示就以什么形式展示。

2、什么是 JSONP？

请求方：a网站 的前端程序员（浏览器）
响应方：b网站 的后端程序员（服务器）

  • 请求方动态创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy

  • 响应方根据查询参数callbackName，构造形如

    yyy.call(undefined, ‘你要的数据’)
    yyy(‘你要的数据’)
    这样的响应

  • 浏览器接收到响应，就会执行 yyy.call(undefined, ‘你要的数据’)

  • 那么请求方就知道了他要的数据
    这就是 JSONP
注：两个约定：

callbackName 一般都叫 callback
yyy函数 一般使用 随机数来命名 如：mamba12312312312321325()

3、JSONP 为什么不支持 POST

因为JSONP是动态创建script来实现的，而动态创建script不支持post请求，只能用get请求。

4、jQuery 的 JSONP方法

1
2
3
4
5
6
7
8
9
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
    if(response === 'success'){
    amount.innerText = amount.innerText - 1
    }
  }
})
需要注意的是：虽然jQuery中，把JSONP归到ajax方法中，但实际上JSONP和ajax没有一丝关系，是核心思路完全不同的两种方法。

5、什么是AJAX

Jesse James Garrett 将如下技术取名叫做 AJAX：异步的 JavaScript 和 XML，即 Async JavaScript And XML
  • 使用 XMLHttpRequest 发请求
  • 服务器返回 XML 格式的字符串
  • JS 解析 XML，并更新局部页面

注：现在已经很少使用XML，更多的使用JSON，即服务器返回符合JSON语法的字符串。

6、如何使用 XMLHttpRequest

  • readyState属性：请求的5种状态，值为0~4，至少一定要知道值为4的含义。
0 ：UNSENT (未打开) open()方法还未被调用.
1 ：OPENED (未发送) open()方法已经被调用.
2 ：HEADERS_RECEIVED (已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回.
3 ：LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据.
4 ：DONE (请求完成) 整个请求过程已经完毕.
核心代码如下：

前端代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
xxx.addEventListener('click',(e) => {
  let request = new XMLHttpRequest()  //产生request对象
  request.open('post','/xxx')  // 配置request对象
  request.send()  // 发送这个对象 
  request.onreadystatechange = ()=>{ // 监听request对象的readyState的变化
    if(request.readyState === 4){
      console.log('请求完成')
      if(request.status >= 200 && request.status < 400){
        console.log('请求成功')
        let string = request.responseText
        console.log(string)
        let obj = JSON.parse(string)
        console.log(obj.note.body)
        
      }else{
        console.log('请求失败')
      }
    }
  }
})

后端代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(path ==='/xxx'){
    response.setHeader('Content-Type','text/json;charset=utf-8')
    response.write(`
      {
        "note":{
          "to":"Enoch",
          "from":"Snow",
          "heading":"Say Hi",
          "body":"Hello Wrold"
        }
      }
    `)
    response.end()
}
JSON（JavaScript Object Notation）是一种由道格拉斯·克罗克福特构想和设计、轻量级的数据交换语言。

7、JSON —— 一门新语言

  • JSON 与 JS 的区别：
JSON 和 JS 是两门不同的语言，JSON借鉴（或者说抄袭）了JavaScript的部分语法。
JSON没有undefined和function
JSON 字符串的首尾必须使用双引号”

举例：

1
2
3
4
5
6
"note":{
  "to":"mamba",
  "from":"Snow",
  "heading":"Say Hi",
   "body":"Hello Wrold"
 }

8、同源策略

阮一峰博客-浏览器同源政策及其规避方法
简单的说就是：只有 协议+端口+域名这三项 一模一样才允许发 AJAX 请求。
举个例子：

1.http://zhihu.com 可以向 http://www.zhihu.com 发 AJAX 请求吗 no
2.http://zhihu.com:80 可以向 http://zhihu.com:81 发 AJAX 请求吗 no

9、CORS 跨域

阮一峰博客-跨域资源共享 CORS 详解

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。
  • 浏览器必须保证只有 协议+端口+域名 一模一样才允许发 AJAX 请求
  • CORS 策略 可以告诉浏览器，我俩一家的，别阻止他
  • 突破同源策略 === 跨域
    举个例子：
    这样写就可以让(http://mamba.com:8001) 这个网站向我的网站发请求
    response.setHeader(‘Access-Control-Allow-Origin’,’http://mamba.com:8001')
    参考