ajax课程-1
日期：2014-05-16 浏览次数：20798 次
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
{
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
