当使用 AJAX 加载数据时,如果返回的数据类型为 script,并且脚本中包含多个变量,这些变量会被全局定义。为了在类的构造函数中加载这些数据,并在全局范围内使用这些变量,可以按照以下步骤进行处理:
1. 理解 dataType: 'script'
当设置 dataType: 'script' 时,jQuery 会将返回的文本作为 JavaScript 代码执行。这意味着服务器返回的脚本会被立即执行,其中定义的变量和函数会在全局作用域中生效。
2. 在构造函数中使用 AJAX 加载脚本
在类的构造函数中,使用 jQuery 的 $.ajax 方法,并设置 dataType 为 'script'。这样,返回的脚本会被执...
在 jQuery AJAX 的 success 回调中直接使用 return 语句是无效的,因为 AJAX 是异步操作。success 回调函数会在请求完成后被调用,而 AJAX 调用本身已经返回了。
正确处理方法
1. 使用回调函数
function getData(callback) {
$.ajax({
url: 'your-url',
type: 'GET',
success: function(response) {
// 处理数据后调用回调函数
callback(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});
}
// 使用
getData(function(data) {
conso...
当使用 jQuery 的 on() 绑定点击事件,并且在 AJAX 请求失败时需要自动重试,你可以采用以下几种方法:
方法一:使用递归重试机制
$(document).on('click', '#myButton', function() {
var retryCount = 0;
var maxRetries = 3;
var retryDelay = 1000; // 1秒后重试
function makeRequest() {
$.ajax({
url: 'your-api-endpoint',
type: 'POST', // 或 'GET'
data: { /* 你的数据 */ },
success: function(response) {
// 处理成功响应
console.log('请求成功', response);
...
// 假设你有一段JavaScript文本
var text = "alert('Hello, World!');";
// 创建一个新的script元素
var script = document.createElement('script');
script.type = 'text/javascript';
// 兼容不同浏览器的方式设置script的text内容
if (script.text) {
script.text = text;
} else if (script.textContent) {
script.textContent = text;
} else if (script.innerHTML) {
script.innerHTML = text;
}
// 将script元素追加到head中
document.head.appendChild(script);
如果使用jQuery,可以更简洁地实现同样的功能:
var data = "alert('Hello, World!');";
// 创建一个新的sc...
在AJAX编程中离不开对XMLHttpRequest对象的使用。XMLHttpRequest对象代表了浏览器和服务器之间的通讯,并可采用异步模式。浏览器通过XMLHttpRequest在后台发起请求,然后通过其属性onreadystatechange注册的回调函数来异步处理应答。编程步骤如下:
1. 创建XMLHttpRequest对象xhr;
2. 调用xhr的open方法打开资源;
3. 通过xhr的属性onreadystatechange注册回调函数;
4. 通过xhr的方法setRequestHeader设置相应请求头;
5. 调用xhr的send方法发起请求。
从上我们可以看到,编程步骤固定,在某些步骤中有些许的变化。由此我们可以联想到模板(template)和回调(callback)编程模式。在此处的回调依赖于xhr的状...
很多人在使用AJAX调用别人站点内容的时候,JS会提示"没有权限"错误,这是XMLHTTP组件的限制-安全起见
禁止访问非同域的网站,下面一个例子来访问http://www.google.cn
function createobj() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
function getWebPage(url) {
var oBao=createobj();
var my_url=url
oBao.open('get',my_url,false);
oBao.onreadystatechange=function(){
if(oBao.readyState==4){
if(oBao.status==200){
var...
Ajax 核心 API(即所谓的 XMLHttpRequest)的唯一用途就是发送 HTTP 请求,在 Web 浏览器与服务器之间进行数据交换。Web 页面中运行的 JavaScript 代码,可以使用 XMLHttpRequest 将该请求参数提交至服务器端脚本,例如 Servlet 或 JSP 页面。调用的 Servlet/JSP 将发回一个响应,其中包含了一般用于不需刷新整个页面即可更新用户查看内容的数据。此种方法在性能和可用性方面均体现出了独有的优势,因为这将降低网络通信量,而且 Web UI 的使用几乎与桌面 GUI 一样。 但是,开发这种用户界面并不简单,因为您必须在客户端上使用 JavaScript、在服务器端上使用 Java(或等效语言)实施数据交换、验证以及处...
new Ajax.Updater(container, url[, options])
执行一个 AJAX 请求,并将响应内容更新到指定容器。
Ajax.Updater 是一个特殊的 Ajax.Request: 后者所具备的功能,前者同样拥有。如果你不熟悉 Ajax.Request,请先阅读与之相关的文档,然后再回到本章。
一个简单的样例
new Ajax.Updater('items', '/items', {
parameters: { text: $F('text') }
});
注意时序
更新完成后,onComplete 回调将会被调用。
附加选项
因为 Ajax.Updater 的目标是使用 AJAX 请求所返回的响应文本更新指定 DOM 元素(容器)的内容,因此, 除公用选项外,它还具有一些新的特定选项:
选项
...
该对象被传递到所有 Ajax 请求回调中作为第一个参数。
这是一个针对原始 XmlHttpRequest 对象(或与之相对应的 ActiveX 控件)的封装。 它解决了跨浏览器的问题,并且通过 responseJSON 和 headerJSON 属性增加了对 JSON 的支持。
译注:Ajax.Request 其实也是封装 XmlHttpRequest。从命名上可以看出, Ajax.Request 用于处理请求,而 Ajax.Response 用于 处理响应。
Ajax.Response 对象的属性
属性
类型
描述
status
Number
服务器发回的状态代码。
...
Ajax.Responders.register(responder) Ajax.Responders.unregister(responder)维护一个全局的侦听器队列,它能捕获到所有基于 Prototype 的 AJAX 请求的每一个步骤。
有时,你需要对发生在页面中的所有 AJAX 操作(通过 Ajax.Request、 Ajax.Updater 或 Ajax.PeriodicalUpdater) 进行一些相同的处理工作。
例如,你可能希望一个 AJAX 请求在执行过程中能自动显示一个指示器,而请求完成时隐藏。你也可能希望处理某些类型的异常, 并将相关的信息写在页面平常用于显示异常信息的区域。类似的需求比比皆是。
为实现以上目的,Prototype 提供 Ajax.Responders,让你能够注册(如果你愿意,后续也可以注销) ...
new Ajax.Request(url[, options])初始化并处理一个 AJAX 请求.
该对象是一个具有多种用途的 AJAX 请求:它管理请求的生命周期,处理“样板文件”代码(boilerplate), 让你能够按照你的需要在指定的阶段插入所需的回调函数。
options 是一个可选的 hash 参数,除非你获取一个将会被 eval 自动执行的 Javascript 类型的响应,否则通常需要提供 onComplete 和/或 onSuccess 回调函数。
公用选项和回调函数的完整列表,请参见 Ajax 选项。
创建一个请求唯一恰当的方法是通过 new 操作符。在对象被创建后,就开始了请求过程, 对该对象的处理贯穿了请求的整个生命周期。
以下是Javascript代码:【复制代...
new Ajax.PeriodicalUpdater(container, url[, options])周期性地执行一个 AJAX 请求并根据返回的响应文本更新指定容器的内容。它提供了一种“退化(decay)”机制 —— 当相邻两次请求的响应内容无变化时,会自动增加后续请求的时间间隔。
该对象解决了常见的要求进行周期性更新的需求,常被用于各种需要“轮询”机制的场合 (例如在线聊天室或在线邮件客户端)。
基本的思路是按照指定的时间间隔定时运行一个指定的 Ajax.Update,如果 decay 选项(请看下面)被激活,则监视响应的内容,并根据其是否变更来调整请求的时间间隔。
附加选项
Ajax.PeriodicalUpdater 支持所有的公用选项及...
在 Ajax 命名空间中的所有请求对象都共享一系列公共的选项和回调函数。 回调函数在请求生命周期的各个阶段被调用,并且它们具有相同的参数列表。在请求期间,参数所包括的选项被不断的传递到请求中。
公用选项
选项 默认值 描述
asynchronous true 指出 XMLHttpRequest 是否是异步的。因为同步的方式在某种程度上具有一定的不确定性, 通常不是一个好的选择,应尽量避免使用。
contentType 'application/x-www-form-urlencoded' 请求头部的 Content-Type(译注:form 元素的 enctype 属性)设置。可能你想要发送的内容是 XML 格式而不是常规的 URL 编码格式,这时,你就需要重新设置这个选项。
encoding 'UTF-8' 请...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test() {
var myAjax = new Ajax.Request(
'http://www.wanfangdata.com.cn',
{
method: 'get',
onComplete: showResponse
}
);
}
f...
类名:AJAXRequest版本:0.3日期:2006-12-18介绍:AJAXRequest是一个方便AJAX开发的通用类,兼容Firefox、IE、Opera、Safari,可以方便地进行一些AJAX中需要的操作,从而简化开发步骤,减少重复代码编写量。
演示地址:http://www.xujiwei.cn/works/ajaxrequest/
使用说明:创建对象:var ajax=new AJAXRequest([url],[callback],[content],[method],[async]);
如果创建失败则返回false
属性:url - 请求URL,字符串,默认为空callback - 回调函数,即返回响应内容时调用的函数,默认为直接返回,回调函数有一个参数为XMLHttpRequest对象,即定义回调函数...
客户端
<script language="javascript">
//生成XML文件
function GetAllFormData()
{
var strXML = "<Client>rn<FormData>rn";
strXML += "<UserName>bccu</UserName>"
strXML += "<Age>25</Age>";
strXML += "</FormData>rn</Client>"
return strXML;
}&...