ajax 分析 学习,kotlin 构造器
Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时,数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反,JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说,JavaScript 代码在幕后发送请求,用户甚至不知道请求的发出。更好的是,请求是异步发送的,就是说 JavaScript 代码(和用户)不用等待服务器的响应。因此用户可以继续输
入数据、滚动屏幕和使用应用程序。然后,服务器将数据返回 JavaScript 代码(仍然在 Web 表单中),后者决定如何处理这些数据。它可以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预!这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互,用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强大力量。
加入一些 JavaScript?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? 得到 XMLHttpRequest 的句柄后,使用 JavaScript 代码完成非常基本的任务:?
获取表单数据:JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。?
修改表单上的数据:更新表单也很简单,从设置字段值到迅速替换图像。?
解析 HTML 和 XML:使用 JavaScript 代码操纵 DOM,处理 HTML 表单服务器返回的 XML 数据的结构。
以 DOM 结束?
最后还有 DOM,即文档对象模型。JavaScript 技术中使用 DOM 很容易,也非常直观。按照常规也许应该说明如何使用 DOM,或者至少要给出一些示例代码,但这样做您可能会被误导。即使不理会 DOM,仍然能深入地探讨 Ajax。当需要在 JavaScript 代码和服务器之间传递 XML 和改变 HTML 表单的时候,我们再深入研究 DOM。没有它也能做一些有趣的工作,因此现在就把 DOM 放到一边吧。
正式开始学习 Ajax
获取 Request 对象?
有了上面的基础知识后,获取 XMLHttpRequest 对象是很简单的。XMLHttpRequest 是 Ajax 应用程序的核心。? 但令人奇怪的是,XMLHttpRequest 成了这场浏览器之间战争的牺牲品之一。因此,针对不同的浏览器获得 XMLHttpRequest 对象可能需要采用不同的方法。
Microsoft 浏览器
Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML(可以通过 参考资料 进一步了解 MSXML)。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道,那么必须用一种特殊的方式创建对象。但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同,MSXML 实际上有两种不同的版本,因此必须对这两种情况分别编写代码。
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");???? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");这两行代码就是尝试使用两个版本的 MSXML 创建对象,如果失败则使用另一个版本创建该对象。如果都不成功,则将 xmlHttp 变量设为 false,告诉您的代码出现了问题。出现这种情况,可能是因为安装了非 Microsoft 浏览器,需要使用不同的代码。
处理 Mozilla 和非 Microsoft 浏览器
var xmlHttp = new XMLHttpRequest object;? 这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了 XMLHttpRequest 对象。
支持所有浏览器
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
这段代码的核心分为三步:?
1、建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。?
2、尝试在 Microsoft 浏览器中创建该对象:?
1)尝试使用 Msxml2.XMLHTTP 对象创建它。?
2)如果失败,再尝试 Microsoft.XMLHTTP 对象。?
3、如果仍然没有建立 xmlHttp,则以非 Microsoft 的方式创建该对象。?
最后,xmlHttp 应该引用一个有效的 XMLHttpRequest 对象,无论运行什么样的浏览器。
Ajax 请求/响应
发出请求?
您已经有了一个崭新的 XMLHttpRequest 对象,现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 JavaScript 方法。接下来就是在所有 Ajax 应用程序中基本都雷同的流程:?
1、从 Web 表单中获取需要的数据。?
2、建立要连接的 URL。?
3、打开到服务器的连接。?
4、设置服务器在完成后要运行的函数。?
5、发送请求。
function callServer() {
// 获取 ID 为 city 的表单信息
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// 判断都不为空
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// 创建要发送的 URl
var url = "/scripts/getCode.aspx?city=" + escape(city) + "&state=" + escape(state);
// 打开连接
xmlHttp.open("GET", url, true);
// 请求返回执行的函数
xmlHttp.onreadystatechange = updatePage;
// 发送请求
xmlHttp.send(null);
}
开始的代码使用是基本 JavaScript 代码获取几个表单字段的值。然后设置一个 aspx 页面 脚本作为链接的目标。要注意脚本 URL 的指定方式,city 和 state(来自表单)使用,简单的 GET 参数附加在 URL 之后。
评论