AJAX之封装+跨域

最新推荐文章于 2022-08-23 20:09:40 发布
最新推荐文章于 2022-08-23 20:09:40 发布
阅读量265 收藏
点赞数
分类专栏： ajax跨域 ajax封装 日报 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuomengjia/article/details/103098943
版权

AJAX5步法

  • 先简单回顾下之前所说的5步法
  • 1、创建异步对象XMLHttpRequest
/*（1）创建XMLHttpRequest异步对象*/
			var xhr;
			if (window.XMLHttpRequest) {
   
				xhr = new XMLHttpRequest();
			} else {
   
				xhr = new ActiveXObject("Microsoft.XMLHTTP")
			}
  • 2、设置回调函数
/* 2.设置回调函数*/
   xhr.onreadystatechange = callback;
  • 3、open()方法连接服务器
xhr.open('get', 'student.text')
  • **4、send()方法发送数据至服务器 **
xhr.send()
  • 5、回调函数中针对不同响应状态进行处理，局部更新界面
xhr.onreadystatechange = function() {
   
	if (xhr.readyState == 4 && xhr.status == 200) {
   
	
	}
}
  • 完整代码如下所示
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
 * {
   
    margin: 0;
    padding: 0;
   }

   div {
   
    border
最低0.47元/天 解锁文章
·Mr.zuo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax请求的五个步骤
m0_54850952的博客
03-08 1万+
目录 Ajax请求的五个步骤 一、定义 1、什么是Ajax 2、同步与异步的区别 3、ajax的工作原理 二、实现AJAX的基本步骤 1、创建XMLHttpRequest对象 2、创建HTTP请求 3、设置响应HTTP请求状态变化的函数 4、设置获取服务器返回数据的语句 5、发送HTTP请求 6、局部更新 三、完整的AJAX实例 Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交
AJAX请求5步法
lihua130427的博客
11-15 517
AJAX请求5部曲： （1）创建XMLHttpRequest异步对象 （2）设置回调函数，针对不同的响应状态进行处理 —监听Ajax的状态readyState的改变事件onreadystatechange （3）使用open方法与服务器建立连接 （4）send注册事件，设置和服务器的交互信息，向服务器发送数据 （5）在回调函数中针对不同的响应状态进行处理，更新界面 简称：AJAX为异步处理，也叫异...
vue中请求接口怎么封装公共地址_聊聊vuejs里对于API接口的处理、封装以及跨域方法应用...
weixin_29746595的博客
01-12 384
对于中小型企业，vue应用越来越多，学习vue相对于react的成本要低点，入门相对简单。话说来，你想学精，还是得花很多事件得研究的。您可以关注Web前端之家，一起学习。今天我们一起来学下：vuejs里对于API接口的处理以及封装方法应用。API接口基础应用在原生javascript和JQ里，我们前端处理接口，一般都是使用get和post方法。在vueJs里，也是如此，只不过我们多了一个axios...
Ajax请求五部曲
weixin_46308182的博客
08-25 440
Ajax异步请求是前端中最为重要的一部分，可以与后端数据进行对接 理解Ajax对理解jQuery里面的Ajax请求有很大的帮助 从前端向后端发送请求报文，后端返回相应报文 请求报文的格式： 请求行 请求头 请求体 Ajax异步请求步骤 1. 实例化XMLHttpRequest对象 var xhr=new XMLHttpRequest(); 2. 设置请求行 请求行中一般设置的是请求的地址和请求的方式，而请求的方式一般为get和post，本文只介绍这两种 1. get请求，是将请求的数据拼接到url地址的后
（三）AJAX请求五步法
web_only_的博客
11-15 1121
本节大纲 （1）AJAX请求步骤(初版) （2）AJAX请求类型 （3）跨域+CORS+Network （4）JSON序列化与反序列化/解析 （5）AJAX请求步骤(微调) AJAX前言 简称：AJAX为异步处理，也叫异步请求 作用：访问远程API(Application Programming Interface)应用程序编程接口. 本质：动态获取远程数据，局部渲染更新页面，所以也叫局部刷新技术...
AJAX的封装和提交方式
WYH1205的博客
02-09 219
一、什么是AJAX ajax是一种技术，是用来进行前后端交互的技术。他可以异步的运输数据。可以节省异步的操作、时间、提高用户的体验、减少数据请求、传输数据请求。 异步：非堵塞，前面一个程序是否执行完毕，不影响后面的程序的执行。 同步：阻塞，前面的程序执行完毕以后，后面的程序才能执行。 带格式的字符串分两种： 1.xml格式 2.json格式 ajax传输数据的步骤： 1.先声明一个ajax对象 2...
详解自定义ajax支持跨域组件封装
08-28
自定义ajax支持跨域组件封装 本篇文章详细分析了自定义ajax支持跨域组件封装相关的知识点，对此有兴趣的朋友参考学习下。 Class.create()分析 Class.create()是一个创建类的方法，通过这个方法可以创建一个新的类...
原生JS封装Ajax插件(同域、jsonp跨域)
10-22
主要为大家详细介绍了原生JS封装Ajax插件，为大家介绍不同域之间互相请求资源的跨域,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax跨域请求
12-09
### AJAX跨域请求详解 #### 一、引言 在Web开发中，由于浏览器的同源策略限制，AJAX请求通常只能向同源服务器发送请求。然而，在实际应用中，跨域请求的需求非常常见。本篇文章将通过一个具体的示例（JSP页面+后台...
ajax封装函数
08-01
对ajax基础的封装
封装了jQuery的Ajax请求全局配置
12-12
下面是在项目中封装了jQuery的Ajax，分享给大家。 代码： 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {  var url = opt.url;  var href = location.href;  // 判断是否跨域请求  var ...
jquery属性的相关js实现方法
dianyin7770的博客
08-30 123
转载:https://www.haorooms.com/post/js_shixian_jquery 有些公司手机网站开发不用第三方的jquery或者zeptio，直接用原生的javascript。原生javascript功能是蛮强大的，只不过部分属性不支持IE8以下浏览器。下面对jquery相关方法，如何用js来实现，做一些简单总结。 元素操作 Add Class //JQ...
Ajax（5部曲，另封装js）get传输
weixin_45137175的博客
09-02 135
Ajax (1)相当于一个中间件，提供异步交换数据，不用刷新页面，更新部分数据 ,ajax 主要是交换数据并且不重新加载整个页面的技术。更新部分网页的一个技术 (2)get因为在url地址栏中显示 所以限制在大于2000个衣服 ，post 是没有限制的。post 高介功能还支持服务器上传文件用二进制输入 Ajax五部曲 （1）第一步 创建异步对象 var xhr = new XMLHttpRequest(); //xmlhttprequest。 为什么用这个 因为w3c官网给的 （2）第二步 设置请求方
自定义ajax支持跨域组件封装
玉超
10-25 1971
Class.create()分析 仿prototype创建类继承 var Class = {     create: function () {         var c = function () {             this.request.apply(this, arguments);         }         for (var
Ajax使用的五步法
weixin_30611509的博客
03-04 166
Ajax使用的五步法 <script type="text/javascript"> //用于保存XMLHttpRequest对象的变量，由于整个过程中必须使用同一个XMLHttpRequest对象，所以要定义成全局的 var xmlhttp; function submit() { ...
Ajax跨域与封装
xjszsd的博客
08-23 494
问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题。JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明。CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应。案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持。
Ajax--请求五步法
weixin_45625673的博客
11-15 254
ajax请求五部曲 1、创建XMLHttpRequest异步对象： 有两种方式，主流浏览器方式和兼容IE低版本。之所以要兼容IE低版本是因为ajax技术的推广使用主要得力于IE（微软）。 主流浏览器 var xhr = new XMLHTTPRequest(); console.log(xhr) 兼容IE低版本方式 var xhr = new Activeodject("Microsoft....
git提交五部曲
weixin_38497513的博客
07-30 380
1.查看当前状态   git status 2.提交修改到git的缓冲区中    git add .  3.推送修改到本地的git库    git commit -m "修复XXbug"  4.拉取远程分支的更新到本地合并（git pull &lt;远程主机名&gt; &lt;远程分支名&gt;  取回远程主机某个分支的更新，再与本地的指定分支合并）    pull origin m...
ajax 调用webservice 跨域解决
最新发布
05-17
如果你的 WebService 与前端代码不在同一个域名下，就会涉及到跨域问题。解决跨域问题的方法有很多，以下是一些常用的方法： 1. JSONP JSONP 是一种利用 script 标签跨域获取数据的方法。它的原理是在页面中动态创建一个 script 标签，src 属性指向 WebService 的地址，并通过回调函数来接收数据。具体实现可以通过以下步骤： - 在前端页面中定义一个回调函数； - 在 WebService 中定义一个方法，方法返回参数为回调函数名称和数据； - 在前端页面中创建一个 script 标签，src 属性指向 WebService 地址，并将回调函数名称作为参数传入； - 当 WebService 返回数据时，会将数据封装成一个 JavaScript 代码块，并通过 script 标签返回给前端页面，并执行回调函数。 2. CORS CORS（Cross-Origin Resource Sharing）是一种浏览器机制，它允许 Web 应用服务器进行跨域访问控制。在 WebService 中添加 CORS 支持，可以使前端页面直接通过 XMLHttpRequest 对 WebService 进行访问。 CORS 的实现需要在 WebService 的响应头中添加 Access-Control-Allow-Origin 字段。该字段的值可以为 *，表示允许任意域名访问，也可以指定特定的域名。 3. 代理 代理是一种常用的跨域解决方案，它的原理是在同一域名下创建一个代理服务器，前端页面通过代理服务器来访问 WebService。代理服务器可以是后端代码，也可以是第三方服务。 在前端页面中，需要将 WebService 的请求发送给代理服务器，代理服务器再将请求转发给 WebService，并将 WebService 的响应返回给前端页面。由于代理服务器和前端页面在同一域名下，因此不存在跨域问题。 以上是几种常用的解决跨域问题的方法，具体应该根据实际情况选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值