ajax课程-1-AJAX教程-爱易网页

ajax课程-1

日期：2014-05-16　浏览次数：20923 次

ajax教程-1

一、Ajax介绍：

Ajax是在网络浏览器（客户端）和服务器之间传送或接受数据的技术。
Ajax结合了Java技术、XML以及JavaScript等编程技术，它实际上是几种技术，合在一起组成的一个功能强大的新技术。?
Ajax可以通过异步的方式，向后端服务器发送请求、响应返回结果，对页面内容进行部分的更新，而不再需要每次由用户通过改变链接地址，对整个页面进行更新。

二、Ajax好处：

??? 传统的网络应用程序会将输入的信息提交给服务器（使用HTML表单），在服务器通过代码后，将会把一个全新的完整的页面传送给用户，由于用户每次提交输入信息的时候服务器都将传回一个新的页面，传统的网络应用程序通常运行缓慢且使用不便，使用AJAX，整个网页就可以于服务器之间局部的发送或者接收数据。

三、同步、异步：

同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事。
异步: 请求通过事件触发->服务器处理（这时候浏览器仍然可以作其他事情）->处理完毕。
举个例子：
- 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
- 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。
- 打电话是同步发消息是异步。

四、XMLHttpRequest对象：

?XMLHttp：是一套可以在javascript、vbscript、jscript等脚本语言中通过http协议传送或者接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
?XMLHttpRequest是XMLHttp组建的对象。
Ajax的无刷新更新页面这一特点主要得益于XMLHttp组建的XMLHttpRequest对象，这样就可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都整个刷新界面，带来不必要的数据处理。

五、实例：

??? 1、传统方式客端与服务器传输数据:

??? myHtml.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@page import="java.net.URLDecoder"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String message="";
if(request.getParameter("message")!=null && !request.getParameter("message").equals(""))
{
	message=new String(request.getParameter("message").getBytes("ISO-8859-1"),"utf8");
}
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>公众AJAX教程-1</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type ="text/javascript" language ="javascript" >
		function sendRequest(url)
		{
			form1.action=url;
			form1.submit();
		}
	</script>
	
  </head>
  
  <body>
   <form name="form1" id="form1" method="get" action="">
   		<dir>
   			<%=message %>
   		</dir>
   		<input id="button1" type="button" value="获取数据"  onclick ="sendRequest('htmlServer.jsp')"/>
   </form>
  </body>
</html>

?? htmlServer.jsp?

<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@page import="java.net.URLEncoder"%>
<%
	 
	//response.sendRedirect("myHtml.jsp?message=html调用成功");这种方式传递中文会出现乱码
	response.sendRedirect("myHtml.jsp?message="+URLEncoder.encode("html调用成功","utf8"));
%>

??? 2、Ajax方式客端与服务器传输数据:

???

??? myAjax.jsp

<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>公众AJAX教程-1</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type ="text/javascript" language ="javascript" >
	
        var XMLHttpReq=false; //定义变量，用来创建xmlhttprequest对象
        function creatXMLHttpRequest() // 创建xmlhttprequest
        {

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ajax课程-1

相关资料更多>

推荐阅读更多>