<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- XML异步加载数据完整的生命周期例子代码 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>XML异步加载数据完整的生命周期例子代码</title>
</head>
<script>
var req = null;
var console = null;
var READY_STATE_UNINITIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE = 3;
var READY_STATE_COMPLETE = 4;
function sendRequest(url, param, HttpMethod) {
if (!HttpMethod) {
HttpMethod = "GET";
}
req = initXMLHTTPRequest();
if (req) {
req.onreadystatechagnge = onReadyState;
req.open(HttpMethod, url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(param);
}
}
function initXMLHTTPRequest() {
var xRequest = null;
if (window.XMLHttpRequset) {
xRequest = new XMLHttpRequest(); //Mozilla/Safari
} else if (typeof ActiveXObject != "undefined") {
xRequest = new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
return xRequest;
}
function onReadyState() { //定义回调函数
var ready = req.readyState;
var data = null;
if (ready == READY_STATE_COMPLETE) { //检查readyState
data = req.responseText; //读取相应数据
} else {
data = "loading ... [" + ready + "]";
}
toConsole(data);
}
function toConsole(data) {
if (console != null) {
var newline = document.createElement("div");
console.appendChild(newline);
var txt = document.createTextNode(data);
newline.appendChild(txt);
}
}
window.onload = function () {
console = document.getElementById('console');
sendRequest("data.txt");
}
</script>
<body>
</body>
</html>
不同的浏览器,执行结果不太一样:
IE:
loading ... [1]
loading ... [1]
loading ... [3]
Here is some text from the server!
Firefox 1.0
loading ... [1]
loading ... [1]
loading ... [2]
loading ... [3]
从代码中可以看出XML技术异步加载数据的方式:
通过XMLHttpRequest向服务器发送一个请求,这个请求是由浏览器额外开一个Http异步请求线程来处理。同时定义了一个回调函数,这个函数相当于一个事件触发的函数,函数触发的条件就是web服务器对这个请求返回一个response。浏览器发送XMLHttpRequest的线程监听到了这个response,会将这个请求放到JavaScript引擎线程队列的最后,等待JavaScript引擎线程的执行,JavaScript引擎始终是单线程执行的。
分享到:
相关推荐
在源网页加载之前,实现一个XMLHttpRequest的代理对象,然后覆盖全局的XMLHttpRequest,这样一但上层调用 new XMLHttpRequest这样的代码时,其实创建的是Ajax-hook的代理对象实例
jQuery介绍-->选择器-->DOM操作-->事件和动画-->Ajax应用-->插件-->完整DEMO 本书循序渐进的对jQuery的各种方法和使用进行介绍,读者可以系统的掌握jQuery关于DOM操作、事件监听和动画、表单操作、AJAX以及插件方面...
名称:Ajax Modifier -------------------- 版本:1.5.3 作者:ygyooo 分类:其他 -------------------- 概述:此扩展仅覆盖 XMLHTTPRequest 对象中的响应数据以及 fetch 方法。 描述: .建议在不使用时关闭此扩展...
[王兴魁]AJAX核心技术1-XMLHttpRequest对象的使用
我的备注 博文链接:https://pmandy-163-com.iteye.com/blog/1488631
AJAX 开发简略 <br>一、AJAX 定义 <br>二、现状与需要解决的问题 <br>三、为什么使用AJAX<br>四、谁在使用AJAX<br>五、用AJAX 改进你的设计 <br>例子1 :数据校验<br> <br><br>相关文章:<br><br>例子2 :按需取数据...
AJAX asynchronouse javascript and xml 异步 javascript 和 xml ---------------------------------------------- B/S 发展历程------> web1.0 特点: 网站的内容 --- 网站的拥有者提供 网站的使用者所做的...
阿贾克斯钩原理解析: : 简介Ajax-hook是一个精巧的用于拦截浏览器XMLHttpRequest的库,它可以在XMLHttpRequest对象发起请求之前和接收响应内容之后获得处理权。通过它您可以在对请求和响应进行一些预处理。更新记录...
Ajax核心对象XMLHTTPRequest详细参数及例子
AjaxXMLHttpRequest_Demo02.zip
asp.net ajax操作xmlHttpRequest对象返回的ResponseXML和ResponseText例子
javascript实例应用---Ajax与XMLHttpRequest.rarjavascript实例应用---Ajax与XMLHttpRequest.rarjavascript实例应用---Ajax与XMLHttpRequest.rar
详解Ajax的核心对象XmlHttpRequest
AJAX(XMLHttpRequest)进行跨域请求方法详解
首先我们来看一看Ajax的定义: Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 个人理解: 触发某个事件->向服务端发起请求->返回响应(数据)->局部更新 在一般的通讯方式当中,我们是...
<br>Safari 2 3575ms 475ms 753% <br>Opera 9.1 3196ms 326ms 980% <br>Average improvement: 867% <br><br>下表为jQuery1.1.3与常用的一些JS库选择器的对比:<br>Browser Prototype jQuery Mootools Ext Dojo <br>...
Ajax深度剖析,XMLHttpRequest对象大揭秘
ajax-proxy是一个用ES6中代理特性实现的用于代理原生对象XMLHttpRequest的库,它可以使您从对XMLHttpRequest进行操作。 使用 安装 CDN约会 < script > https: //unpkg....