Ajax使用（引用）

最新推荐文章于 2025-10-07 12:26:10 发布
转载 最新推荐文章于 2025-10-07 12:26:10 发布 · 1.6k 阅读 · 0
文章标签：

#ajax #xmlhttprequest #function #object #null #ie

本文详细介绍了Ajax对象的创建、配置、GET/POST请求方法及处理响应数据的流程，并通过实例展示了如何使用Ajax对象获取和发送数据。

Ajax对象:


function Ajax(recvType){

var aj=new Object();
aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML
aj.targetUrl='';
aj.sendString='';
aj.resultHandle=null;


aj.createXMLHttpRequest=function(){
var request=false;

//window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
if(window.XMLHttpRequest){
request=new XMLHttpRequest();


if(request.overrideMimeType){
request.overrideMimeType("text/xml");
}



//window对象中有ActiveXObject属性存在就是IE
}else if(window.ActiveXObject){

var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];


for(var i=0; i<versions.length; i++){
try{
request=new ActiveXObject(versions[i]);


if(request){
return request;
}
}catch(e){
request=false;
}
}
}
return request;
}


aj.XMLHttpRequest=aj.createXMLHttpRequest();


aj.processHandle=function(){
if(aj.XMLHttpRequest.readyState == 4){
if(aj.XMLHttpRequest.status == 200){
if(aj.recvType=="HTML")
aj.resultHandle(aj.XMLHttpRequest.responseText);
else if(aj.recvType=="XML")
aj.resultHandle(aj.XMLHttpRequest.responseXML);
}
}
}


aj.get=function(targetUrl, resultHandle){
aj.targetUrl=targetUrl;

if(resultHandle!=null){
aj.XMLHttpRequest.onreadystatechange=aj.processHandle;
aj.resultHandle=resultHandle;
}
if(window.XMLHttpRequest){
aj.XMLHttpRequest.open("get", aj.targetUrl);
aj.XMLHttpRequest.send(null);
}else{
aj.XMLHttpRequest.open("get", aj.targetUrl, true);
aj.XMLHttpRequest.send();
}

}


aj.post=function(targetUrl, sendString, resultHandle){
aj.targetUrl=targetUrl;


if(typeof(sendString)=="object"){
var str="";
for(var pro in sendString){
str+=pro+"="+sendString[pro]+"&";
}
aj.sendString=str.substr(0, str.length-1);
}else{
aj.sendString=sendString;
}


if(resultHandle!=null){
aj.XMLHttpRequest.onreadystatechange=aj.processHandle;
aj.resultHandle=resultHandle;
}


aj.XMLHttpRequest.open("post", targetUrl);
aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
aj.XMLHttpRequest.send(aj.sendString);

}


return aj;

}




-------------------------------------------------------------------------------------------------------------------------------------------------

使用方法


ajax.get("server.php?username=zhangsan&email=aaa@bbb", function(data){});


ajax.post("server.php", "username=value&aaa=bb", function(data){});
 




Chrome Manifest扩展引用Ajax-hook库拦截请求失败，如何解决？？
**My Coding Family**
10-26 1156
如上问题有的来自我自身项目开发，有的收集网站，有的来自读者…如有侵权，立马删除。再者，针对此专栏中部分问题及其问题的解答思路或步骤等，存在少部分搜集于全网社区及人工智能问答等渠道，若最后实在是没能帮助到你，还望见谅！并非所有的解答都能解决每个人的问题，在此希望屏幕前的你能够给予宝贵的理解，而不是立刻指责或者抱怨！如果你有更优解，那建议你出教程写方案，一同学习！共同进步。ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏。
在项目中添加引用Ajax
05-12
在项目中添加引用Ajax
【10.0】Ajax之引入
Chimengmeng的博客
07-17 486
【一】Ajax简介 【1】精髓 精髓：异步提交/局部刷新 动态获取用户名，实时跟后端确认并将结果展示给前端 【2】发送请求的方式 向后端发送请求的方式 浏览器地址直接url回车 GET请求 a标签的 href 属性 GET请求 form表单 GET请求/POST请求 Ajax GET请求/POST请求 【3】简介 Ajax不是新的编程语言，而是一种使用...
Ajax基本使用
2301_77987130的博客
10-07 947
本文介绍了Ajax技术的基本概念、实现方式及前后端分离开发模式。主要内容包括： Ajax概述：异步JavaScript和XML技术，用于在不刷新页面的情况下与服务器交换数据并更新部分网页内容。 原生Ajax实现：通过XMLHttpRequest对象分四步完成请求（创建对象、设置参数、发送请求、处理响应）。 Axios简化Ajax：封装原生Ajax，提供更简洁的API（如axios.get/post）和Promise风格的回调处理。 前后端分离开发：通过接口文档规范协作，解决混合开发的沟通与维护问题。
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
11-25
jquery中各个事件执行顺序如下： 1.ajaxStart(全局事件) 2.beforeSend(局部事件) 3.ajaxSend(全局事件) 4.success(局部事件) 5.ajaxSuccess(全局事件) 6.error(局部事件) 7.ajaxError (全局事件) 8.complete(局部事件) 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件) 其中，全局事件可以在ajax相关方法外引用（比如，通过该方式将ajax执行各个阶段的信息显示在页面某个地方）。 下例演示一次ajax请求过程中各个事件执行的顺序，以及全局ajax的使
AJAX 引用
namespacefeng的专栏
01-04 507
一：引用命名空间： using AjaxPro; 二：Load事件下加载：  protected void Page_Load(object sender, EventArgs e)     {         Utility.RegisterTypeForAjax(typeof(IndexPage_DetectManageAllMain)); 三：方法前加 [AjaxPro.AjaxM
Ajax之引入
m0_71292438的博客
11-20 750
精髓：异步提交/局部刷新Ajax不是新的编程语言，而是一种使用现有标准的新方法(类比装饰器)Ajax最大的优点就是不重新加载页面的情况下，可以与服务器交换数据并更新部分网页内容这种特点给用户的感觉就是在不知不觉中完成了请求和响应过程Ajax(Asynchronous JavaScript and XML)是一种用于创建动态网页的编程技术。它通过在网页上进行异步数据传输，实现了在不重新加载整个页面的情况下更新部分页面内容的能力。
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
asp.net下ajax.ajaxMethod使用方法
01-02
将ajax.dll添加到项目引用中：在VS的解决方案资源管理器中右键点击项目名称–“添加项目引用”–浏览，找到ajax.dll确定 3。webCofig中加上”POST,GET” path=”ajax/*.ashx” type=”Ajax.PageHandlerFactory,>节点...
实例详解angularjs和ajax的结合使用
11-23
【AngularJS与AJAX结合使用详解】 在前端开发中，AngularJS和AJAX的结合使用是构建现代Web应用的关键技术之一。这篇文章将深入探讨如何在实际项目中有效地整合这两个工具，提升开发效率和用户体验。 首先，...
Ajax的使用
Z_2010317的博客
08-15 510
客户端发送请求，请求交给XMLHttpRequest，XMLHttpRequest 把请求提交给服务，服务器进行业务处理，服务器响应数据交给XMLHttpRequest对象，XMLHttpRequest对象接收数据，由javascript把数据写到页面上。同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。异步就相当于当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。该参数规定Ajax请求的一个或多个名称/值对。...
Ajax引入
张晓鉴Allen的博客
01-17 5309
坚持每天写博文，记录开发中的点点滴滴 局部刷新：每次刷新，服务器会把所有的数据都重新发送一遍，ajax可以让服务器只发送特定信息（不通过浏览器发送请求） 举例：传统方式校验用户名是否重复? 1.提交整个表单, action获取用户名的值进行是否重复验证,如果验证成功保存数据,跳转成功页面,如果失败添加错误信息到valuestack跳转录入页面. 2.通过弹出窗口. 指定一个url地址并且地址
ajax需要引入么,AJAX的引用
weixin_26899659的博客
08-05 1702
首先，ajax主要是实现页面和web服务器之间数据的异步传输。举个简单例子，不采用ajax的页面，当用户在页面发起请求时，就要进行整个页面的刷新，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，不能进行其他操作。也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低，用户体验差。采用ajax的页面，可以实现页面的局部更新，而不是整个页面的更新；并且发起请求后，用户还可以进行页面...
$.ajax()方法详解（网上引用）
weixin_30598225的博客
06-01 2300
jquery中的ajax方法参数总是记不住，这里记录一下。 1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒...
ajax 引用端口
weixin_71439860的博客
08-18 319
ajax 引用端口
ajax 的js引用
weixin_30263277的博客
09-05 661
function ajax(method,url,data,success){ var oAjax = null; if(window.XMLHttpRequest){ oAjax=new XMLHttpRequest() }else{ oAjax=new ActiveXObject("Microsoft.XMLHTTP")...
引用 Ajax初体验(一)
真水无香
06-12 733
引用一个地址，学习的文章：http://blog.youkuaiyun.com/bulbul2006/archive/2006/06/07/778407.aspx
ajax类库的使用
张朝玉的专栏
11-10 1519
转自msdn AJAX依靠代理（broker）指派和处理往返服务器的请求。对此，.NET包装器依靠客户端XmlHttpRequest对象。多数浏览器都支持XmlHttpRequest对象，这就是选择它的原因。因为包装器的目的是隐藏XmlHttpRequest的实现，我们就不再详细讨论它了。包装器本身通过将.NET函数标记为AJAX方法来工作。标记之后，AJAX就创建对应的JavaScript函数，
Ajax 的技术优势
记得忘记@博客
08-10 1617
Ajax所带来的优势：1.由于可以在页面内与服务器通信，不必整体刷新页面，减少了数据传输量，提高了Web应用的响应速度，给用户带来全新的感受。2.由于可以在页面内与服务器通信，使得构建智能化的客户端控件成为可能。例如：数据表格，树型控件等各种复杂的控件。3.智能化的客户端控件可以通过XMLHttpRequest与服务器通信，来获取数据，并可缓冲和处理数据。使得许多工作可以在客户端完成，
引用ajax
最新发布
12-17
<think>我们正在讨论如何引用AJAX技术。根据引用内容，AJAX是一种用于创建异步Web应用的技术，它允许在不重新加载整个页面的情况下与服务器交换数据。引用AJAX主要涉及以下几个方面： 1. **直接使用原生JavaScript的XMLHttpRequest对象**：这是最基础的方式，不需要引入外部库。 2. **使用第三方库（如jQuery）**：jQuery提供了简化的AJAX方法，使得使用更加方便。 3. **使用专门的AJAX库（如Axios）**：Axios是一个基于Promise的HTTP客户端，适用于浏览器和Node.js。 4. **在特定框架中使用（如ASP.NET AjaxPro）**：如引用[3]所示，在ASP.NET中可以通过注册AjaxPro来使用。 接下来，我将分别介绍这几种方式的具体引用方法。 ### 一、原生JavaScript方式（XMLHttpRequest） ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 配置请求：方法、URL、是否异步 xhr.open('GET', 'https://api.example.com/data', true); // 设置状态改变时的回调函数 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功，处理响应数据 console.log(JSON.parse(xhr.responseText)); } }; // 发送请求 xhr.send(); ``` > 注意：现代浏览器也支持`fetch` API，它是基于Promise的更现代替代方案[^1]。 ### 二、jQuery方式 需先引入jQuery库： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 然后使用`$.ajax`方法： ```javascript $.ajax({ url: 'https://api.example.com/data', method: 'GET', dataType: 'json', success: function(data) { console.log(data); }, error: function(error) { console.error('Error:', error); } }); ``` > jQuery简化了AJAX调用，并处理了浏览器兼容性问题[^2]。 ### 三、Axios方式 需先引入Axios库： ```html <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> ``` 然后发起请求： ```javascript axios.get('https://api.example.com/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(error); }); ``` > Axios支持Promise，并提供了拦截器等高级功能[^4]。 ### 四、ASP.NET AjaxPro方式（适用于.NET环境） 1. 添加AjaxPro引用（通过NuGet或手动添加DLL） 2. 在页面加载时注册类型： ```csharp protected void Page_Load(object sender, EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(typeof(YourClassName)); } ``` 3. 在服务器端方法添加`[AjaxMethod]`属性： ```csharp [AjaxPro.AjaxMethod] public static string GetServerData() { return "Data from server"; } ``` 4. 客户端JavaScript调用： ```javascript YourClassName.GetServerData(function(response) { alert(response.value); }); ``` > 此方式适用于ASP.NET Web Forms项目[^3]。 ### 五、现代浏览器fetch API（无需引入库） ```javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` ### 选择建议 | 方式 | 适用场景 | |-------------------|----------------------------------| | 原生XMLHttpRequest| 无需额外库、小型项目 | | jQuery | 已有jQuery的项目、快速开发 | | Axios | 需要高级功能（拦截器、取消请求） | | fetch API | 现代浏览器、追求轻量化 | | AjaxPro | ASP.NET Web Forms项目 | ### 注意事项 1. **跨域问题**：如果请求不同域的接口，需要服务器设置CORS（跨域资源共享）[^1] 2. **错误处理**：始终处理AJAX失败情况，避免程序静默失败 3. **安全性**：防止XSS（跨站脚本攻击）和CSRF（跨站请求伪造） > 根据项目需求选择合适的方式，现代项目推荐使用`fetch`或`axios`[^4]。 §§相关问题§§ 1. 如何解决AJAX请求中的跨域问题？ 2. AJAX与Fetch API的主要区别是什么？ 3. 在Vue/React中如何优雅地使用AJAX？ 4. AJAX请求如何防止CSRF攻击？ 5. 如何处理AJAX请求的超时？ </think> ## AJAX引用方法详解 根据引用内容，AJAX的引用方式主要有以下几种： ### 一、原生JavaScript方式（XMLHttpRequest） ```javascript // 1. 创建XMLHttpRequest对象 const xhr = new XMLHttpRequest(); // 2. 配置请求（方法、URL、异步） xhr.open('GET', 'https://api.example.com/data', true); // 3. 设置回调函数处理响应 xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(JSON.parse(xhr.responseText)); } else { console.error('请求失败:', xhr.statusText); } }; // 4. 处理错误 xhr.onerror = function() { console.error('网络错误'); }; // 5. 发送请求 xhr.send(); ``` > 这是AJAX最基础的实现方式，所有现代浏览器都支持。 ### 二、jQuery方式（推荐简单项目） ```html <!-- 1. 引入jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // 2. 使用$.ajax方法 $.ajax({ url: 'https://api.example.com/data', method: 'GET', dataType: 'json', success: function(data) { console.log(data); }, error: function(xhr, status, error) { console.error('请求失败:', error); } }); // 简写形式 $.getJSON('https://api.example.com/data', function(data) { console.log(data); }); </script> ``` > jQuery简化了AJAX调用，处理了浏览器兼容性问题。 ### 三、Axios方式（推荐现代项目） ```html <!-- 1. 引入Axios --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // 2. 发起请求 axios.get('https://api.example.com/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error('请求失败:', error); }); // POST请求示例 axios.post('/save-data', { name: 'John', age: 30 }) .then(response => console.log(response)); </script> ``` > Axios基于Promise设计，支持请求拦截等高级功能[^4]。 ### 四、ASP.NET AjaxPro方式（.NET专用） ```csharp // 1. 后端注册（Page_Load事件） protected void Page_Load(object sender, EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(typeof(YourPageClass)); } // 2. 添加Ajax方法 [AjaxPro.AjaxMethod] public static string GetServerTime() { return DateTime.Now.ToString(); } ``` ```javascript // 3. 前端调用 YourPageClass.GetServerTime(function(response) { alert(response.value); }); ``` > 适用于ASP.NET Web Forms项目[^3]。 ### 五、现代Fetch API（无需引入库） ```javascript // 1. 发起GET请求 fetch('https://api.example.com/data') .then(response => { if (!response.ok) throw new Error('网络响应异常'); return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('请求失败:', error)); // 2. POST请求示例 fetch('/api/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) }); ``` > 现代浏览器原生支持的方案，无需额外引入库。 ### 引用方案对比 | 方式 | 优点 | 缺点 | 适用场景 | |------------------|-------------------------------|--------------------------|-----------------------| | XMLHttpRequest | 无需外部库，浏览器原生支持 | 代码冗长，兼容性处理复杂 | 简单请求，学习用途 | | jQuery | 语法简洁，兼容性好 | 需引入整个jQuery库 | 已有jQuery的项目 | | Axios | 功能强大，Promise支持 | 需额外引入 | 现代Web应用 | | Fetch API | 现代标准，语法简洁 | 低版本浏览器不支持 | 现代浏览器环境 | | ASP.NET AjaxPro | .NET集成度高 | 仅限.NET环境 | ASP.NET Web Forms项目 | > 根据项目需求选择合适的方式，现代项目推荐使用**Axios**或**Fetch API**[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值