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与跨域
shenzhongkang的博客
05-10 865
一、为什么要封装Ajax    （1）原生的方式过于繁琐，并且大量重复代码。 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(""); // 异步对象声明 xhr.onreadystatechange = function(){ // 事件监听     if(xhr.readyState == 4...
自定义ajax支持跨域组件封装
玉超
10-25 1971
Class.create()分析 仿prototype创建类继承 var Class = {     create: function () {         var c = function () {             this.request.apply(this, arguments);         }         for (var
3.AJAX请求5步法
weixin_45582846的博客
11-15 626
AJAX请求5步法 大纲 （1）AJAX请求步骤(初版) （2）AJAX请求类型 （3）跨域+CORS+Network （4）JSON序列化与反序列化/解析 （5）AJAX请求步骤(微调) AJAX请求步骤 AJAX请求5部曲： （1）创建XMLHttpRequest异步对象 （2）设置回调函数，针对不同的响应状态进行处理       &...
ajax五步
srfx465454的专栏
07-25 133
Ajax使用的五步法&lt;script type="text/javascript"&gt;//用于保存XMLHttpRequest对象的变量，由于整个过程中必须使用同一个XMLHttpRequest对象，所以要定义成全局的          var xmlhttp;          function submit()          {              //第一步：创建XMLHt...
ajax请求和封装、跨域解决
W8034的博客
07-29 265
1 Ajax请求 var requestHead=new XMLHttpRequest();//实例化一个ajax请求的对象 requestHead.open(method,url,false);//开启一个ajax请求 // 参数1 请求的方式(method/post) 参数2 请求的地址 参数3 是否发送同步请求(一般默认，不写) requestHead.send();//发送ajax请求 //获取ajax请求的响应数据 //获得来自服务器的响应，使用 XMLHttpRequest 对象的 resp
详解自定义ajax支持跨域组件封装
08-28
自定义ajax支持跨域组件封装 本篇文章详细分析了自定义ajax支持跨域组件封装相关的知识点，对此有兴趣的朋友参考学习下。 Class.create()分析 Class.create()是一个创建类的方法，通过这个方法可以创建一个新的类...
原生JS封装Ajax插件(同域、jsonp跨域)
10-22
主要为大家详细介绍了原生JS封装Ajax插件，为大家介绍不同域之间互相请求资源的跨域,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax跨域请求
12-09
### AJAX跨域请求详解 #### 一、引言 在Web开发中，由于浏览器的同源策略限制，AJAX请求通常只能向同源服务器发送请求。然而，在实际应用中，跨域请求的需求非常常见。本篇文章将通过一个具体的示例（JSP页面+后台...
封装了jQuery的Ajax请求全局配置
12-12
下面是在项目中封装了jQuery的Ajax，分享给大家。 代码： 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {  var url = opt.url;  var href = location.href;  // 判断是否跨域请求  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_使用 Ajax 的五种方式和五件需要注意的事
weixin_33724059的博客
07-25 83
原文地址：http://www.devx.com/webdev/Article/45533 Ajax已经改变了Web应用程序的开发方式，对于开发者来说，Ajax仍然是创新的源泉。 虽然Ajax在2005年就已经正式开始，术语Ajax一词才有，但它的历史和影响可以追溯到90年代。1999年，微软为它的浏览器推出了一种通过HTTP在后台异步检索数据的方法。 几年后，开发者完善了Ajax的异步能力，使它...
ajax 跨域封装 JSONP方式 默认还是GET提交请求
zero_295813128的专栏
04-05 1450
/**--jquery ajax请求处理插件类--**/ var WebsiteAjax = { returnData : null, //获取一个实例 getInstance : function(settings){ /** * 默认的200回调函数（可重写和继承） */ var defaultAjaxSuccessMethod = function(dat
AJAX请求5步法
lihua130427的博客
11-15 517
AJAX请求5部曲： （1）创建XMLHttpRequest异步对象 （2）设置回调函数，针对不同的响应状态进行处理 —监听Ajax的状态readyState的改变事件onreadystatechange （3）使用open方法与服务器建立连接 （4）send注册事件，设置和服务器的交互信息，向服务器发送数据 （5）在回调函数中针对不同的响应状态进行处理，更新界面 简称：AJAX为异步处理，也叫异...
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....
（三）AJAX请求五步法
web_only_的博客
11-15 1121
本节大纲 （1）AJAX请求步骤(初版) （2）AJAX请求类型 （3）跨域+CORS+Network （4）JSON序列化与反序列化/解析 （5）AJAX请求步骤(微调) AJAX前言 简称：AJAX为异步处理，也叫异步请求 作用：访问远程API(Application Programming Interface)应用程序编程接口. 本质：动态获取远程数据，局部渲染更新页面，所以也叫局部刷新技术...
原生ajax——五步法写ajax、兼容
qq_44741877的博客
01-19 186
局部刷新技术 ajax请求：请求后端接口，返回数据到前端，前端根据需求渲染到界面 【五步法写ajax】 1.创建ajax对象 var http=new XMLHttpRequest(); 2.建立服务器连接 open（）的参数 （1）发送请求的参数 get post （2）api路径 （3）async 同步或者异步 值为：true异步/false同步 ·（可写可不写） 其中同步指的是等待请求完成之后再执行后续代码；异步则是请求和后续代码同时执行； （4）连接接口的账号 （5）密码 h
ajax 调用webservice 跨域解决
最新发布
05-17
- 当 WebService 返回数据时，会将数据封装成一个 JavaScript 代码块，并通过 script 标签返回给前端页面，并执行回调函数。 2. CORS CORS（Cross-Origin Resource Sharing）是一种浏览器机制，它允许 Web 应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值