`
中国爪哇程序员
  • 浏览: 164764 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

AJAX

 
阅读更多
一. AJAX 注意事项
(1)XHR不会修改浏览器历史栈,即点击“后退”button没有用。
(2)地址栏没有变化
(3)不要过渡使用
(4)老板本流览器不支持(流览器需要支持XHR)
(5)关键是JS,CSS式样,一般与其他插件联合使用。自己写JS容易出问题

二. 外围技术
JS,HTML,DOM,CSS,JSON

三.XMLHttpRequest
IE : xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
FireFox :  xmlHttp = new XMLHttpRequest();


四:功能
(1)局部刷新
(2)异步,也支持同步
open(method,URL,同步or异步,用户名,密码);
open方法多态,最多五个参数,即上,前两个参数为必入例项。
第三个参数:boolena, true:异步;false :同步 。 默认是同步。
测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>
    
<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
    		alert("active x");
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
    		alert("xml");
        xmlHttp = new XMLHttpRequest();
    }
}
    
function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    //alert("a");
    xmlHttp.open("GET", "http://localhost:8080/ajax/a.htm", true,"admin","password");
     //alert("b");
    xmlHttp.send(null);
    //alert("c");
}
    
function handleStateChange() {
	   //alert("1");
    if(xmlHttp.readyState == 4) {
    		 //alert("2");
        if(xmlHttp.status == 200) {
        	// alert("3");
        	 document.write(xmlHttp.responseText);
           // document.write("<h1>"+xmlHttp.responseText+"</h1>");
           // alert("The server replied with hehe  : " + xmlHttp.responseText);
        }
    }
}
</script>
    

open 方法设置成true:
访问的URLhttp://localhost:8080/ajax/a.htm 在其servlet打上断点。
alert输出顺序:a, b ,c, 断点,反回结果后,接口回调。
异步效果,发送请求后,在没有返回结果前,会继续渲染页面,执行JS和CSS脚本。即执行alert("C");
open方法设置成:false:
访问的URLhttp://localhost:8080/ajax/a.htm 在其servlet打上断点。
alert输出顺序:a, b , 断点,c, 反回结果后,接口回调。
在没有返回结果前,不会再续渲染页面。

五, xmlHttp API

方法                                      描述
Abort()                        停止当前请求
getResponseHeader(“header”)    返回指定首部的串值
Open(“method”,”url”)        建立对服务器的调用,method参数可以是GET,POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。
Send(content)                    向服务器发送请求
setRequestHeader(“header”,”value”)      把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

标准XMLHttpRequest属性

Onreadystatechange
每个状态改变时,都会出发这个事件处理器。通常会调用一个JavaScript函数。
readyState
请求的状态。有5个可取值:0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成
responseText
服务器的响应,表示为一个串。
responseXML
服务器的响应,表示为XML,这个对象可以解析为一个DOM对象。
Status
服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等)
statusText
HTTP状态的相应文本(OK或者Not Found(未找到)等等)

六.get post发送区别
post比get多一行代码:
xmlHttp.setRequestHeqader("Content-Type","application/x-ww-form-urlencoded");

附件是Ajax in action 示例源代码。
分享到:
评论

相关推荐

    ajax面试题ajax面试题

    关于Ajax的常见面试题 1,Ajax和javascript的区别? javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。 Javascript是由...

    ASP.NET AJAX程序设计——第I卷:服务器端ASP.NET 2.0 AJAX Extensions与ASP.NET AJAX Control Toolkit 源代码

    本卷从最易于理解和使用的那部分入手,介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分,包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...

    实例详解Android Webview拦截ajax请求

    Android Webview虽然提供了页面加载及资源请求的钩子,但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能...

    ajax快速解决参数过长无法提交成功的问题

    在ajax中使用post方法,用常规的参数格式:param1=a1&param2=a2 ,当参数长度过长时,依然提交不成功。比如我们经常这样写一个ajax的post请求: $.ajax({ type: "post", // post or get contentType:"application...

    ajax控件ajax控件ajax控件ajax控件

    ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    ajax特效ajax特效ajax特效

    ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效

    Ajax(Ajax使用js包)

    使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤

    ajax 基础教程源代码

    ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...

    asp版ajax用户注册 ajax 注册程序 asp版 ajax

    学习的网上的一个ajax版注册程序,对界面进行了改变!是适合学习ajax的朋友的一个好的例子!

    掌握Ajax 学习资料pdf

    掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...

    ajax控件ajax控件

    ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件...

    完全手册ASP.NET AJAX实用开发详解 源码

    并应用上述知识开发了8个基于AJAX的Web应用系统,如基于AJAX的文件和图像处理、AJAX祝福墙、AJAX留言簿、AJAX聊天室、AJAX RSS阅读器、AJAX相册、基于AJAX的电子邮件处理等。最后以两个大型的AJAX Web应用系统(基于...

    Java Ajax分页,jsp ajax分页

    Ajax + JavaScript + MySQL 实现的Ajax分页功能

    Ajax Ajax本质 Ajax本质源码

    Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码

    AJax详解.chm

    第 1 部分:Ajax 简介 第 2 部分:: 使用 JavaScript 和 Ajax 发出异步请求 第 3 部分: Ajax 中的高级请求和响应 第 4 部分: 利用 DOM 进行 Web 响应 第 5 部分: 操纵 DOM 第 6 部分: 建立基于 DOM 的 Web 应用程序 第...

    ajax例子ajax例子

    ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子

    ajax 分页ajax 分页ajax 分页

    ajax 分页ajax 分页ajax 分页

    支持AJAX的TreeView树例子,使用省市县三级xml作演示

    看到网上很多想用ajax的树的例子,很奇怪,明明TreeView自带AJAX功能,取非要自己去写一大堆代码, 工作量增加了,而性能又没有提高多少 正好自己这次用到了,就做了一个例子,供大家一起研究参考 注:顺便下载了一...

    ajax详解ajax详解ajax详解ajax详解ajax详解ajax详解ajax详解ajax详解ajax详解

    ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解

Global site tag (gtag.js) - Google Analytics