Ajax--》请求操作以及跨域相关讲解

目录

jQuery中的Ajax

请求超时与网络异常处理

取消请求

Ajax请求—fetch()

跨域


jQuery中的Ajax

在jQuery中应该如何发送Ajax请求呢?看到这篇文章你就能大概了解到如何在jQuery中发送Ajax。

要想使用jQuery框架,肯定是需要引进jQuery资源的,有两种方式,一种是将资源下载到本地,另一种是直接引入网站jQuery链接,推荐大家一个比较好用的网站:bootcdn 其网站致力于为许多像 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。

点击相关需求,引入相关链接到HTML里面即可,请看如下操作:

<!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>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送Ajax请求</h2>
        <button class="btn btn-paimary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            // 参数分别是 url 参数对象 回调函数 响应体类型-json
            $.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json')//加了json返回的结果是一个对象
        })
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery',function(data){
                console.log(data);
            })//不加json返回的结果是一个字符串
        })
    </script>
</body>
</html>
// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.jQuery服务
app.all('/jquery',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*')
    // response.send('hello jQuery')
    const data = {name:'张三'}
    response.send(JSON.stringify(data))
})

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8080端口监听中....');
})

这里借用了一点bootstarp样式来修改一下CSS属性,让样式更好看点。

上面讲解了get和post请求操作,如果想单独设置个性化强一点的Ajax请求操作,可以选择通用型操作,代码如下:

<!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>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送Ajax请求</h2>
        <button class="btn btn-paimary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法</button>
    </div>
    <script>
        $('button').eq(2).click(function(){
            $.ajax({
                // url
                url:'http://127.0.0.1:8000/jquery',// 参数
                data:{a:100,// 请求类型
                type:'GET',// 响应体结果设置
                dataType:'json',// 成功的回调
                success:function(data){
                    console.log(data);
                },// 超时时间
                timeout:2000,// 失败的回调
                error:function(){
                    console.log('出错了!!');
                },// 头信息
                headers:{
                    c:300,d:400
                }
            })
        })
    </script>
</body>
</html>

请求超时与网络异常处理

请求超时:当我们进行服务器数据传输时因为网络原因出现超时问题,我们设置超时规则来提示用户网络超时

<!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>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #008c8c;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button')
        const result = document.querySelector('#result')
        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest()
            // 超时2s设置取消
            xhr.timeout = 2000
            // 超时回调
            xhr.ontimeout = function(){
                alert('网络异常,请稍后重试!!')
            }
            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

设置express服务

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()


// 3.延时响应
app.get('/delay','*')
    // 设置延时效果
    setTimeout(()=>{
        // 设置响应体
        response.send('延时响应')
    },3000)
})

// 4.监听端口启动服务
app.listen(8000,8080端口监听中....');
})

网络异常:访问网站时,如果网络突然断掉,通过Ajax来提醒我们网络断开。

取消请求

既然Ajax可以请求数据,那我们也可以将Ajax请求的数据取消也可以的,这里需要借助Ajax的一个属性 abort 来进行操作。案例如下:

<!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>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <script>
        const btns = document.querySelectorAll('button')
        // 将x设置为全局变量
        let x = null
        btns[0].addEventListener('click',function(){
            x = new XMLHttpRequest()
            x.open('GET','http://127.0.0.1:8000/delay')
            x.send()
        })
        // 取消方法 abort
        btns[1].addEventListener('click',function(){
            x.abort()
        })
    </script>
</body>
</html>

当然我也设置一个延时服务来进行数据还没有请求完就取消的过程。

取消重复请求

在日常浏览网页中,可以由于一些网络或其他原因导致用户疯狂的进行数据请求,这样一来,用户的数量一高请求的数据就很庞大,导致服务器承受不住这么大的流量,所以我们就要进行取消重复的操作来缓解服务器的压力。操作过程如下:

<!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>
    <button>点击发送请求</button>
    <script>
        const btns = document.querySelector('button')
        // 将x设置为全局变量
        let x = null
        // 标识变量
        let isSending = false

        btns.addEventListener('click',function(){
            // 判断标识变量
            if(isSending) x.abort()//如果正在发送,则取消该请求,创建一个新的请求
            x = new XMLHttpRequest()
            // 修改 标识变量的值
            isSending = true
            x.open('GET','http://127.0.0.1:8000/delay')
            x.send()
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    // 修改标识变量
                    isSending = false
                }
            }
        })

    </script>
</body>
</html>

提供express服务

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.延时响应
app.get('/delay',8080端口监听中....');
})

Ajax请求—fetch()

fetch()方法用于发起获取资源的请求,它返回一个promise,这个promise会在请求响应后被resolve,并传回 response 对象。注意:fetch()方法的参数与request()构造器是一样的。

<body>
    <button>Ajax请求</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            fetch('http://127.0.0.1:8000/fetch',{
                // 请求方法
                method:'POST',// 请求头
                headers:{
                    name:'zhangsan'
                },// 请求体
                body:'username=admin&password=admin'
            }).then(response=>{
                return response.json()
            }).then(response=>{
                console.log(response);
            })
        })
    </script>
</body>
// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.fetch服务
app.all('/fetch','*')
    response.setHeader('Access-Control-Allow-Headers',8080端口监听中....');
})

跨域

同源策略(Same-Origin-Policy)最早由 Netscape 公司提出,是浏览器的一种安全策略。同源就是协议、域名、端口号必须完全相同,违背同源策略就是跨域。Ajax默认遵循同源策略。

<body>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            const x = new XMLHttpRequest()
            // 因为是满足同源策略的,所以url是可以简写的
            x.open('GET','/data')
            x.send()
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status <300){
                        console.log(x.response);
                    }
                }
            }
        })
    </script>
</body>
const { response,request } = require('express')
const express = require('express')
const app = express()
app.get('/home',response)=>{
    // 响应一个页面
    response.sendFile(__dirname+'/index.html')
})

app.get('/data',response)=>{
    response.send('用户数据')
})
app.listen(9000,()=>{
    console.log('9000端口开启,服务已启动...');
})

如何解决跨域

JSONP,是一个非官方的跨域解决方案,由程序员开发出来,只支持get请求。在网页中有一些标签天生具有跨域能力,比如:img、link、iframe、script等,JSONP就是利用script标签的跨域能力来发送请求的。

原理:返回函数调用,并把参数放在里面,让前端的函数对它进行一个处理,用服务端代码去响应JS代码。

<!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>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 1px solid #008c8c;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 处理函数
        function handle (data) {
            // 获取元素
            const result = document.querySelector('#result')
            result.innerHTML = data.name
        }
    </script>
    <!-- <script src="./app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp"></script>
</body>

</html>

原生JS代码

const data = {
    name:'张三'
}

handle(data)

express服务

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.JSONP服务
app.all('/jsonp',response)=>{
    // response.send('console.log("hello jsonp");')
    const data = {
        name:'张三'
    }
    // 将数据转换为字符串
    let str = JSON.stringify(data)
    // 返回结果 end()不会加特殊响应头
    // 返回的结果是一个函数调用,而函数的实参就是我们想给客户端返回的结果数据
    response.end(`handle(${str})`)
})

// 4.监听端口启动服务
app.listen(8000,8080端口监听中....');
})

jsonp实践

<body>
    用户名:<input type="text" id="username">
    <p></p>
    <script>
        // 获取 input 元素
        const input = document.querySelector('input')
        const p = document.querySelector('p')

        // 声明 handle 函数
        function handle (data) {
            input.style.border = "solid 1px #f00"
            // 修改 p 标签的提示文本
            p.innerHTML = data.msg
        }

        // 绑定事件
        input.onblur = function () {
            // 获取用户的输入值
            let username = this.value
            // 向服务器发送请求,检测用户名是否存在
            // 1.创建 script 标签
            const script = document.createElement('script')
            // 2.设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/username'
            // 3.将script插入到文档中
            document.body.appendChild(script)
        }
    </script>
</body>

jQuery实现发送jsonp请求

<!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>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 1px solid #008c8c;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">
        
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery?callback=?',function(data){
                $('#result').html(`
                    名称:${data.name},<br>
                    科目:${data.subject}
                `)
            })
        })
    </script>
</body>

</html>
// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.jQuery服务
app.all('/jquery',response)=>{
    // response.send('hello jQuery')
    const data = {
        name:'张三',subject:['语文','数学','英语']
    }
    let str = JSON.stringify(data)
    // 接收 callback 参数
    let cb = request.query.callback
    // 返回结果
    response.end(`${cb}(${str})`)
})

// 4.监听端口启动服务
app.listen(8000,8080端口监听中....');
})

CORS:跨域资源共享 。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求,跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

CORS是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。

<!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>
    <button>点击发送请求</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            // 1.创建对象
            const x = new XMLHttpRequest()
            // 2.初始化设置
            x.open('GET','http://127.0.0.1:8000/cors')
            // 3.发送
            x.send()
            // 4.绑定事件
            x.onreadystatechange = function(){
                if(x.readyState ===4 ){
                    if(x.status >= 200 && x.status < 300){
                        // 输出响应体
                        console.log(x.response );
                    }
                }
            }
        })
    </script>
</body>
</html>
// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.CORS
app.all('/cors','*')
    response.send('hello cors')
})

// 4.监听端口启动服务
app.listen(8000,8080端口监听中....');
})

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式 表单提交方式一:直接利用form表单提交 html页面代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时_用户注册 实时异步检测
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问,AJAX已经成为当今Web开发中一种强有力的用户交互技术,但是它的许多可能性应用仍然鲜为人知。在本文中,我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖 掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有 空闲的对象,则使用此对象,否则将创建一个新的对象。下面是我最近写的一个简单的类:* XMLHttpReques_xmlhttprequest发送多个请求
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢,比如博客页,需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象,但这并不现实。其实实现方式非常简单,就是给 onreadystatechange 对应的回调函数加上参数,以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段,它在Html中形成了一个数据的集合,数据岛允许我们在Html网页中集成xml,对xml编写脚本.数据岛有它特有的形式,由标记xml开始,在开始标记中要有一个ID属性,用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种:1)内嵌的数据岛形式2)外嵌的数据岛形式说了那么多废话,还_数据中岛计算模式
文章浏览阅读2.1k次。AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣,才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个。用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明: url不用说了; callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就_xmlhttprequest downloadurl
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用,回调,下载,抓取,实时,查询,远程通信(Remoting),远程通信脚本(RemoteScripting),同步,上传,XMLHttpRequest图6-2:XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时,web站点发出_createxmlhttpre
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法(根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的,他也附了單元測試的專案,底下是我額外增加的UnitTest,我的目標就是讓底下的測試可以pass,而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int),Asp.Net Ajax 無法正確序列日期,AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件,標榜速度快,對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要,但前幾天突然有個情況,我要序列的是一個泛型參數,該參數不一定是物object型別,有可能是st_token string in state start
文章浏览阅读1.3k次。转载自:http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知,UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获,并且使用 XMLHttpRequest对象发送内容,然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
文章浏览阅读1.9k次。有些时候,只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面,导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题:通过定时器或用户事件触发数据岛(XML对象)象服务器获取数据,在数据获取完成后,适时更新相关数据。示例HTML部分:http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的,如果我们的无刷新页面使用xmlhttp技术,我们或许需要频繁的建立xmlhttp对象,当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信,而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞,用户可能再次调用同一个xmlhttp实例,如果这时前一个通信未完成,那么就
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要:Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar