四、ajax（难点）

最新推荐文章于 2023-05-23 10:57:25 发布

不想写，还得写，写就写，慢慢写

最新推荐文章于 2023-05-23 10:57:25 发布

阅读量235

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/m0_74331185/article/details/127971125

版权

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

示例：通过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端口上...')
})