AJAX基础应用方式
来源:互联网 发布:国外期刊数据库 编辑:程序博客网 时间:2024/06/07 03:40
1 AJAX简介
资料来源于W3School
1.1 什么是AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。
1.2 XMLHttpRequest(XHR)对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1.2.1 创建XMLHttpRequest对象
在原生JavaScript中创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject(“Microsoft.XMLHTTP”);
/*为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :*/var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
1.2.2 XMLHttpRequest 对象方法(向服务器发送请求)
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open(“GET”,”test1.txt”,true);
xmlhttp.send();
注:
上面简单的例子可能得到缓存的结果。为避免这种情况,可向URL添加一个唯一的ID。
xmlhttp.open(“GET”,”demo_get.asp?t=” + Math.random(),true);
xmlhttp.send();可通过GET方法发送信息,向URL添加信息:
xmlhttp.open(“GET”,”demo_get2.asp?fname=Bill&lname=Gates“,true);
xmlhttp.send();如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open(“POST”,”ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);
1.2.3 异步 - True 或 False
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","test1.txt",true);xmlhttp.send();
当使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
xmlhttp.open("GET","test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
1.2.4 XMLHttpRequest对象属性(服务器响应)
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText 属性返回字符串形式的响应,因此您可以这样使用:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
如果来自服务器的响应是XML,而且需要作为XML对象进行解析,请使用 responseXML 属性。
1.2.5 onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
注:
onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
注:使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
/*即将多个AJAX任务能够复用的代码封装到自定义函数loadXMLDoc中*/function myFunction(){loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } });}
2 服务器端获取及返回数据方式
2.1 ASP和PHP服务器
2.1.1 ASP服务器处理数据方式
获得来自 URL 的 q 参数:
q=ucase(request.querystring(“q”))
返回数据:
response.write(xxx);
2.1.2 PHP服务器处理数据方式
获得来自 URL 的 q 参数:
返回数据:
echo $response
2.2 JAVA服务器
2.2.1 Servlet方式
步骤1:在web.xml中添加servlet标签
<servlet> <servlet-name>RegistServlet</servlet-name> <servlet-class>web.RegistServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>RegistServlet</servlet-name> <url-pattern>/getAJAX</url-pattern> </servlet-mapping>
步骤2:创建对应Servlet类web.RegistServlet,继承HttpServlet,并overwrite父类的service方法或doGet和doPost方法。
步骤3:通过上步方法的HttpServletRequest参数对象获取数据,通过HttpServletResponse对象返回数据。
返回数据需要用到PrintWriter对象:
//如果中文乱码需要设置字符编码response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.print(xxx);
ps:
jsp通过内置的request和response对象获取和返回数据。
2.2.2 Struts2方式
步骤1:在web项目中加入Struts2框架。
步骤2:在struts.xml中创建actiong关联自定义Action类。
步骤3:自定义Action类继承ActionSupport类
步骤4:
- 可以在自定义Action执行的方法中通过ServletActionContext.getRequest()和getResponse()方法获得HttpServletRequest和HttpServletResponse对象。
- 也可以在自定义Action类中添加与传入数据变量名一致的变量,并生成setter方法,Struts会自动匹配并赋值。
步骤5:传数据到客户端方法与Servlet方式一样。
3 JQuery实现AJAX
3.1 $.ajax();
最简单的情况下,$.ajax()可以不带任何参数直接使用。
注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置。
如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
回调函数均有多个参数可选。
- beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
- error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
- dataFilter 在请求成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
- success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
- complete当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
样例:
$.ajax({ url:"", //data选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} 。 data:{ "name1":"value1", "name2":"value2" }, //服务端返回的数据类型,除了单纯的XML,还可以指定 html、json、jsonp、script或者text。 dataType:"json", //type默认是"GET",请求方式有"POST"、"GET" type:"GET", beforeSend:function(XMLHttpRequest){ }, dataFilter:function(data, dataType){ }, success:function(data[,textStatus,jqXHR]){ }, error:function(XMLHttpRequest, textStatus, errorThrown){ } complete:function (XMLHttpRequest, textStatus){ },});
3.2 load(url, [data], [callback])
概述
载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。
参数
- url:待装入 HTML 网页网址。
- data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
- callback:载入成功时回调函数。
样例
$("#links").load("/Main_Page #p-Getting-Started li");$("#feeds").load("feeds.html"); $("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });
3.3 其他简化$.ajax()的方法
$.get(url, [data], [callback], [datatype])
$.getJSON(url, [data], [callback])、$.getScript(url, [callback])
$.post(url, [data], [callback], [datatype])
ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)
$.ajaxSetup([options])//设置全局 AJAX 默认选项。
- AJAX基础应用方式
- AJAX基础应用专题
- 基础ajax应用
- Ajax基础应用代码详解
- ajax入门 ajax使用方式2-ajax基础
- JQuery整合Ajax的方式及应用
- AJAX基础应用的简单示例
- AJax实现机制及基础应用
- ajax简单应用之传递数据的方式
- ajax基础 GET,POST方式传值,同步异步
- Ajax在jQuery中应用--jQuery基础知识点(5)
- JS基础学习应用之ajax.js函数的封装
- ajax应用
- ajax应用
- Ajax应用
- ajax应用
- Ajax应用
- AJAX 应用
- P-CNN: Pose-based CNN Features for Action Recognition
- PaaS容器集群优化之路
- Qt5 简单使用webview 和openssl报错处理
- 串口看门狗实验
- 字符串常量池
- AJAX基础应用方式
- PAT 1002 A+B for Polynomials(简单计数)
- 设置eclipse注释模板
- pthread_mutex_lock 函数
- 关于linux系统和tomcat时间不一致的问题
- C#获取本机上所有网络接口及真实IP地址信息
- Sudoku Extension UVALive
- ovs vswitchd的启动(二)
- STM32 RTC 时钟简介