`

Ajax入门

    博客分类：
  • Ajax
 
阅读更多
AJAX入门
　　AJAX全称“Asynchronous JavaScript and XML”（异步JavaScript和XML）是JavaScript，CSS，DOM，XmlHttpRequest 4种技术的集合体，主要应用于异步获取后台数据和局部刷新。是一种创建交互式网页应用的网页开发技术。
　　传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务 器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都 需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快 的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
　　通过与传统Web开发模式比较可知Ajax应用程序的优势在于：
通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户量下的服务器负载。
………………………………………………………………………………………………………
XmlHttpRequest 的属性
onreadystatechange   指定当readyState属性改变时的事件处理句柄，只写 。
readyState     返回当前请求的状态，只读。
responseBody     将回应信息正文以unsigned byte数组形式返回，只读
responseStream       以Ado Stream对象的形式返回响应信息，只读 。
responseText       将响应信息作为字符串返回，只读 。
responseXML       将响应信息格式化为Xml Document对象并返回，只读 。
status         返回当前请求的http状态码，只读 。
statusText       返回当前请求的响应行状态，只读 。

XmlHttpRequest 的方法
abort 取消当前请求
getAllResponseHeaders   获取响应的所有http头
getResponseHeader   从响应信息中获取指定的http头
open         创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码) //常用
send         发送请求到http服务器并接收回应 //常用
setRequestHeader   单独指定请求的某个http头

语法：
onreadystatechang 指定当readyState属性改变时的事件处理句柄，只写

xmlHttp.onreadystatechange = getReady;
function getReady(){
//返回当前请求的状态,readyState共有四种状态(0,1,2,3,4)
//4 (完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
objectDiv.innerHTML="完成！！！";
}else{
objectDiv.innerHTML="抱歉，加载数据失败！原因：" +xmlHttp.statusText;
}
}
}

readyState 返回当前请求的状态，只读。readyState，变量。定义如下：
0 (未初始化)  对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化)  对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据


responseText 将响应信息作为字符串返回，只读 。
xmlHttpObj.responseText;
responseBody ,responseStream ,responseText ,responseXML 与之相似
responseXML可以返回一个文档树(DOM)，可以使用：
document.getElementsByTagName,
document.getElementsByTagNameNS,
document.getElementById等对其操作

stateus 返回当前请求的http状态码，只读 。
　　200表示请求的响应成功！！！
　　
open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息

xmlHttpObj.open(Method,URL[,Async][,User][,PassWord]);  []表示可选

参数：
Method:POST|GET(大小写不敏感)
URL:请求的URL地址，可以为绝对地址也可以为相对地址。
Async:[true|fase] 是否同步，默认为true。
User:如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，则会弹出验证窗口。
Password：验证信息中的密码部分，如果用户名为空，则此值将被忽略。

send 发送请求到http服务器并接收回应

xmlHttpObj.send([Text]);

参数：
Text:要发送的数据，默认为空(null);

一个简单完整的XMLHTTP例子：
<script type="text/javascript">
var objectDiv;
var xmlHttp;
function getXML(){
objectDiv = document.all.divHtml;
objectDiv.innerHTML="正在装载数据，请稍后...";

//针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的bug进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6，IE5
//将两个用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新针对高版本浏览器
var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0; i<activexName.length; i++){
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，抛出异常，然后可以继续循环，继续尝试创建
xmlHttp = new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
//开发阶段测试用例判断创建xmlHttp是否成功
/**
if(!xmlHttp){
alert("XMLHttpRequest对象创建失败！！！");
return;
}else{
alert(xmlHttp);
}
*/
//指定当readyState属性改变时的事件处理句柄，只写 。
xmlHttp.onreadystatechange = getReady;
xmlHttp.open("GET","ajax/1103Schema.xml",true);
xmlHttp.send();
}

function getReady(){
//返回当前请求的状态,readyState共有四种状态(0,1,2,3,4)
//4 (完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
objectDiv.innerHTML="完成！！！";
}else{
objectDiv.innerHTML="抱歉，加载数据失败！原因：" +xmlHttp.statusText;
}
}
}
function xmlhttpOnclick(){
if(xmlHttp && xmlHttp.responseText) {
//alert(xmlHttp.responseText);
objectDiv.innerHTML=xmlHttp.responseText;
}
}
</script>
  </head>
 
  <body>
    xmlhttp异步的例子:
URL:<input value="http://localhost:8080/ajaxDemo/ajax/1103Schema.xml" style="width:600px">
<input onclick="getXML()" type="button" value="得到源代码">
<input onclick="xmlhttpOnclick()" type="button" value="显示源代码">
    <div id="divHtml"></div>
  </body>
分享到：
| mysql
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax入门例子项目

    在这个"Ajax入门例子项目"中，我们将深入探讨Ajax的基础概念、工作原理以及如何创建简单的Ajax应用。 1. Ajax基础概念： - 异步：Ajax的主要特性是异步通信，意味着用户在请求发送后可以继续浏览网页，而无需等待...

    《ajax入门经典》源代码

    **Ajax入门经典源代码概述** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行异步数据交互，结合XML或其他...

    AJAX入门

    ### AJAX入门知识点详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现这一点，从而为用户...

    ASP.NET 2.0 AJAX入门经典实例,有很好的参考价值,XML-Script

    《ASP.NET 2.0 AJAX入门经典》这本书很可能包含了多个示例，演示如何使用AJAX技术来增强ASP.NET 2.0应用程序的交互性。这些实例可能涵盖用户界面改进、数据异步加载、实时验证等多个场景，帮助读者掌握实际开发技巧...

    ASP.NET_AJAX入门系列

    ASP.NET_AJAX入门系列：概述.doc ASP.NET_AJAX_在Web开发中的应用.doc ASP.NET_AJAX入门系列：Timer控件简单使用.doc ASP.NET_AJAX入门系列：UpdateProgress控件简单介绍.doc ASP.NET_AJAX入门系列：使用...

    Ajax入门，java Ajax入门

    **Ajax入门：无刷新技术与JavaScript中的Ajax** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据并局部更新页面，使得用户...

    ASP.NET AJAX入门系列教程

    　ASP.NET AJAX是一个完整的开发框架，其服务器端编程模型相对于客户端编程模型较为简单，而且容易与现有的ASP.NET程序相结合，通常实现复杂的功能只需要在页面中拖几个控件，而不必了解深层次的工作原理，除此之外...

    Ajax入门教程（通过例子讲解）

    Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax允许网页与服务器之间进行交互，实现数据的动态加载，提高了用户体验。 在...

    ajax入门教程PDF

    **Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个...通过阅读这份"ajax入门教程PDF"，初学者将能够快速理解Ajax的工作方式，掌握基本的Ajax编程技能，从而在实际项目中提升网页的交互性和动态性。

    AJAX入门实例-简单易懂

    总的来说，这个"AJAX入门实例"旨在帮助初学者理解AJAX的基本概念和工作流程，以及如何在ASP.NET环境中实现它。通过学习这个实例，你可以掌握创建异步Web应用的基本技巧，提高用户体验，并为后续更复杂的AJAX应用场景...

    ajax chm ajax入门 ajax教程

    **Ajax入门**通常涉及以下几个关键概念： 1. **XMLHttpRequest对象**：它是Ajax的核心，用于在后台与服务器进行通信。创建XMLHttpRequest对象后，可以通过它的open()方法设置请求类型（GET或POST）、URL以及是否异步...

    Ajax 入门经典 (Ajax 核心 技术)

    **Ajax 入门经典——掌握Ajax核心技术** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，极大地...

    Ajax程序经典小例子，《Ajax入门教程》代码

    在《Ajax入门教程》中，可能包含了一系列经典的小例子，比如： 1. **实时搜索建议**：用户在输入框中输入字符时，利用Ajax动态向服务器发送请求，获取匹配的搜索建议，并即时显示在下拉框中。 2. **无刷新分页**：...

    ajax读取页面内容【简单的ajax入门实例】

    通过这个简单的Ajax入门实例，你可以理解如何利用Ajax实现页面内容的异步加载。随着经验的增长，还可以学习更高级的技巧，如使用jQuery的$.ajax()函数、Promise或现代的fetch API，以及错误处理和进度回调等。

    Ajax入门视频教程

    **Ajax入门视频教程** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于JavaScript，通过XMLHttpRequest对象与服务器进行异步数据交互，从而实现...

    前端技术ajax入门

    ### 前端技术AJAX入门精讲 #### 一、AJAX概述 **AJAX**（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现...

    ajax入门视频教程

    **Ajax入门视频教程详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得Web应用程序能够更快、更高效地运行，提升了用户体验，因为它允许...

    ajax入门是初学者的宝典

    ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典 ajax入门 ajax入门 ajax入门是初学者的宝典

    ajax入门书籍 ajax入门到精通

    ajax入门书籍 ajax入门到精通 好用又源码

Magicbox
Global site tag (gtag.js) - Google Analytics