JSON数据、Node的http模块、ajax、jQuery中对ajax的封装

一、JSON数据

1. 什么是JSON：JavaScript Object Notation，是一种轻量级的前后端数据交换的格式（数据格式）。

2. 特点

（1）容易阅读和编写

（2）语言无关性：和任何的开发没有关系

（3）便于编译、解析

3. 语法要求

（1）是key-value：一个键对应一个值

（2）每个数据项之间用逗号分隔

（3）用花括号（{ }）保存对象

（4）用中括号（[ ]）保存数组

    let obj = [
        {
            id: 1001,
            name: '张三'
        },
        {
            id: 1002,
            name: '李四'
        }
    ]

4. 常用方法

JSON.stringify（参数）：将参数里面的数据转换为json格式的字符串

    let obj = [
        {
            id: 1001,
            name: '张三'
        },
        {
            id: 1002,
            name: '李四'
        }
    ]
    res.end(JSON.stringify(obj))

5. 使用场景：在前后端交互时，凡是需要将结构化的数据转换为文本时，都可以使用JSON格式。

二、Node的http模块

使用node创建http服务器（重点）

1. Web服务器：网站服务器，主要提供网上信息的浏览服务

常见的Web服务器软件有Apache HTTP Server (简称Apache)、Nginx等。

2. web资源

（1）静态资源：服务器没有修改的，客户端每次请求的结果都是一样的资源。（CSS、image等）

（2）动态资源：经过服务器处理的资源信息。

3. HTTP协议：HyperText Transfer Protocol，超文本传输协议。规范了客户端和服务器之间进行交互的数据格式。是基于’请求’ —‘响应’的协议

（1）请求（request）：客户端(浏览器)向服务器发送信息（发送请求）—- http请求

（2）响应（response）：服务器接收到客户端的请求后做的响应 —- http响应

（3）内容：

基本信息：请求地址（url）、请求方式（get/post）、请求-响应是否完成、路由地址（ip地址）
响应头信息：http协议的版本号、200是状态码（表示请求-响应已经完成）、响应文本的格式
请求头信息：User-Agent（客户端浏览器的内核）、Host（请求的服务器的地址和端口号）、Accept发送请求的文本格式

（4）状态码：不同的状态码反应了请求—响应过程的完成情况

200：请求-响应的过程已经成功完成
204：请求-响应已经完成，但是没有响应数据
以3开头的状态码表示页面重定向了
404：客户端请求的资源不存在
403：服务器拒绝请求
400：请求的语法错误
500：服务器错误，无法响应请求
503：服务器无法使用

（5）响应信息的格式：采用‘大类型/具体类型’的方式定义

text/plain：普通文本格式
text/html：html文件
text/css：css文件
application/javascript：js文件

4. node中http模块的应用：

（1）导入：require(‘http’)

（2）创建服务器：http.createServer(function(){ })，返回一个http的服务器对象

（3）启动服务器监听：listen(端口号，服务器地址、callback)

5. 在服务器端获取客户端请求数据的方式：是通过请求对象request来完成的

（1）req.method：获取客户端的请求方式

（2）req.url：获取客户端的请求地址

（3）req.url.query：获取的是客户端采用get方式向服务器发送的请求数据

get方式发送的请求数据：是拼接在url地址之后的

http://127.0.0.1:9000?userName=张三&age=25

‘?’：是url和请求参数（query）之间的分隔符

‘&’：是参数之间的分隔符

（4）req.body：获取的是客户端采用post方式向服务器发送的请求数据

post方式发送请求时：先将请求地址单独发送出去，然后将请求参数和页面的body绑定在一起进行发送

在node的http服务器端需要使用querystring模块对客户端发送的body信息进行转换后才能得到请求参数

const server = http.createServer((req,res)=>{
    console.log(req.method) //req.method表示客户端的请求方式（get、post、put、delete）
    //2.1 过滤浏览器自动发送的请求：/favicon.ico
    if(req.url !== '/favicon.ico'){
        //------------------------以下是处理的get方式的请求---------------------： 
           //2.2 使用url对象转换客户端的请求地址：req.url是字符串，通过parse方法将字符串转换为url对象
        // let client_url = url.parse(req.url,true).query //将req.url中query转换成对象（key-value）
           //2.3 使用响应对象res将信息发送给客户端
        // res.setHeader('Content-Type','text/html;charset=utf8') //设置响应头信息,charset表示字符集
        // let obj = {
        //     id:1001,
        //     name: '张三'
        // }
           // res.end(JSON.stringify(obj))
        // res.end(`<h2>欢迎您：${client_url.userName}</h2>`)
        //----------------------以下是处理post方式的请求----------------------
        //1.给req对象注册data事件：可以开始读body中的数据
        let info = ''
        req.on('data',function(value){ //参数value表示从数据流中读取的数据
            info += value
        })
        const querystring = require('node:querystring')
        //2. 给req对象注册end事件：表示body中的数据已经读完了
        req.on('end',function(){
            //将body中的数据进行转换：使用的querystring模块
            let body_data = querystring.parse(info)
            res.setHeader('Content-Type','text/html;charset=utf8')
            res.end(`欢迎您：${body_data.userName}`)
        })
    }
})

三、ajax（难点）

1、同源和跨域

（1）同源（Origin）：协议、域名、端口号相同就是同源。例如

检测 http://www.a.com:8080/test/index.html 地址的同源

http://www.a.com/dir/path.html ——>成功，协议是http、域名是www.a.com、端口号8080

http://www.child.a.com/dir/page.html ——> 失败，非同源，域名不同

https://www.a.com/dir/page.html —>失败，非同源，协议不同

http://www.a.com:8089/test/index.htmo —->失败，端口号不同

（2）引入同源策略的原因：是浏览器的一种安全机制，即客户端的脚本(javascript程序)在没有明确授权的情况下时不能访问对方（服务器端）的资源。不受同源策略限制的操作：页面中的连接（超链接）、页面的重定向、表单提交

（3）跨域：只有协议、域名、端口号有一个不同就是跨域。产生跨域的原因：因为javascript的同源策略（JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源）。跨域的解决方案：

a、cors：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。限制是若在服务器端不做配置就无法跨域，严重依赖服务器端

b、jsonp：利用script标签具有跨域的特征，在本地的回调函数中实现跨域。

c、反向代理（Reverse Proxy）：在客户端独立的解决跨域问题

2、什么是Ajax：Asynchronous JavaScript And XML，异步的JavaScript的XML支持

（1）xml：是一种前后端交互时使用的文件格式。用户可以自定义标签

（2）异步：客户端向服务器发起请求后不会等待服务器的响应(处理结果)，继续执行自己的流程；当服务器的响应信息到了后，调用客户端的回调函数，对响应信息进行处理即可。

（3）异步的优点：

a、减轻服务器的负担：

b、节省带宽

c、用户的体验感很好

（4）Ajax技术：不是新技术，只是对html、javascript、xml这些技术的整合，整合后可以实现页面的局部刷新。

3、Ajax的实现过程

（1）创建ajax的核心对象：XMLHttpRequest，使用该对象向服务器发起请求，是一个异步请求，实现页面的局部刷新

w3c标准的浏览器创建XMLHttpRequest对象的方法：

let xhr = new XMLHttpRequest()

非w3c标准的浏览器创建时：

let xhr = new ActivexObject()

（2）XMLHttpRequest对象的属性：

a、onreadystatechange：本质是一个事件，当请求响应的状态发生改变时触发。

b、readyState：请求响应的状态值。

0 = 未初始化（uninitialized）
1 = 正在加载（loading）
2 = 加载完毕（loaded）
3 = 交互（interactive）
4 = 完成（complete）

c、responseText：服务器给客户端响应的字符串

d、status：服务器响应的http状态码（200 表示请求响应成功）

（3）XMLHttpRequest对象的方法：

a、open(”method”,”URL”)：建立和服务器之间的连接。

参数”method”：表示发起请求的方式

参数”url”：表示服务器地址

b、send(content)：发送请求，参数通常为null

（4）设置跨域
设置允许来自哪里的跨域访问:’*’表示所有的跨域
res.setHeader(“Access-Control-Allow-Origin”, “*”);
设置允许跨域访问的方式：服务器接收哪些方式的跨域访问
res.setHeader(“Access-Control-Allow-Methods”, “GET,PUT,POST,DELETE,OPTIONS”);
设置请求头中允许携带的参数
res.setHeader(“Access-Control-Allow-Headers”, “Content-Type,request-origin”);

示例：通过XMLHttpRequest对象向服务器发起异步请求

客户端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>
        用户名：
        <input type="text" name="userName" id="userName">
        <button type="button" id="btn_submit">提交</button>
        <br><br>
        <div style="width: 200px;height:100px;background-color:red;color:white;" id="msg"></div>
    </label>
    <script>
        //需求：给按钮绑定click事件：当用户单击按钮时，获取input中的数据，发送给远程服务器
        document.querySelector('#btn_submit').addEventListener('click',function(){
            //1.创建XMLHttpRequest对象
            let xhr = new XMLHttpRequest()  
            //2.利用该对象同远程的服务器建立一个连接
            let uname = document.querySelector('#userName').value //获取input标签中的值
            xhr.open('get','http://127.0.0.1:9000?userName='+uname)
            //3.向服务器发起请求
            xhr.send(null)
            //4.判断XMLHttpRequest对象的状态
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){ //表示请求-响应的过程成功完成
                    //将服务器响应的信息写入到页面的div中
                    document.querySelector('#msg').innerHTML = xhr.responseText
                }
            }
        })
    </script>
</body>
</html>

服务器端：

const http = require('http')
const url = require('url')
//创建http服务器
const server = http.createServer((req,res)=>{
    //设置跨域
    //设置允许来自哪里的跨域访问:'*'表示所有的跨域
    res.setHeader("Access-Control-Allow-Origin", "*");
    //设置允许跨域访问的方式：服务器接收哪些方式的跨域访问
    res.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS")
     //设置请求头中允许携带的参数
    res.setHeader("Access-Control-Allow-Headers", "Content-Type,request-origin");
    if(req.url != '/favicon.ico'){
        //1.采用url模块对req.url进行转换
        let client_url = url.parse(req.url,true).query
        //2.设置响应信息的格式和字符集
        res.setHeader('Content-Type','text/html;charset=utf8')
        //3.向客户端发送响应信息
        res.end(`<h2>欢迎您，${client_url.userName}</h2>`)
    }
})
//启动监听
server.listen(9000,'127.0.0.1',()=>{
    console.log('服务器已启动，运行在9000端口上...')
})

四、jQuery中对ajax的封装

1. $.ajax(url,[setting])。例如：

前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    用户名：
    <input type="text" id="userName">
    <span id="sp"></span>
    <script>
        $(function(){ //入口函数
            $('#userName').bind('blur',function(){ //当input失去焦点时：向服务器发起请求
                $.ajax({
                    url: 'http://127.0.0.1:9000',  //服务器的url
                    type:'get', //请求方式
                    data: {
                        userName: $('#userName').val()
                    }, //发送给服务器的数据：将input的value发送给服务器
                    dataType: 'json', //服务器返回的数据格式
                    success:function(result){ //请求成功后服务器返回的数据：参数result中存放的是服务器返回的数据
                        $('#sp').html(result.msg)
                    }
                })
            })
        })
    </script>
</body>
</html>

服务器端：

const http = require('http')
const url = require('url')
//创建http服务器
const server = http.createServer((req,res)=>{
    //设置跨域
    //设置允许来自哪里的跨域访问:'*'表示所有的跨域
    res.setHeader("Access-Control-Allow-Origin", "*");
    //设置允许跨域访问的方式：服务器接收哪些方式的跨域访问
    res.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS")
     //设置请求头中允许携带的参数
    res.setHeader("Access-Control-Allow-Headers", "Content-Type,request-origin");
    if(req.url != '/favicon.ico'){
        //1.采用url模块对req.url进行转换
        let client_url = url.parse(req.url,true).query
         //2.设置响应信息的格式和字符集
         res.setHeader('Content-Type','text/html;charset=utf8')
        let info = {}
        if(client_url.userName === 'abc'){
            info.msg = '用户名不可用'
        }else{
            info.msg = '用户名可用'
        }
        res.end(JSON.stringify(info))
    }
})
//启动监听
server.listen(9000,'127.0.0.1',()=>{
    console.log('服务器已启动，运行在9000端口上...')
})

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79764.html