ajax入门案例以及乱码有关问题
日期：2014-05-16 浏览次数：20653 次
ajax入门案例以及乱码问题
![]()
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。这就是AJAX的优势了，可以使网页从服务器请求少量的信息，而不是整个页面。
下面通过一个简单的小案例帮助大家进一步理解AJAX，先看效果图:
1： 前台是一个简单的获取当前页面的值和AJAX，已给出相应的注释，不懂留言：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>
<base href="<%=basePath%>">
<title>My JSP 'Login.jsp' starting page</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function btn_click(){
//创建XMLHttpRequest对象
var xmlHttp;
xmlHttp=new XMLHttpRequest();
try{
//兼容Firefox,Opera8.0+,Safari
xmlHttp=new XMLHttpRequest();
}catch(e){
//兼容IE
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("您的浏览器不支持ajax");
return false;
}
}
}
//获取文本框的值
var username=document.getElementById("txt_username").value;
var password=document.getElementById("txt_password").value;
//设置编码，避免中文出现乱码。
username=encodeURIComponent(encodeURIComponent(username));
//配置XMLHttpRequest对象
xmlHttp.open("GET","servlet/LoginServlet?username="+username+"&password="+password,true);
//设置回调函数
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==0){
docuement.getElementById("result").innerHTML="未初始化.还没调用open()..";
}else if(xmlHttp.readyState==1){
docuement.getElementById("result").innerHTML="正在连接服务器.还没调用send()..";
}else if(xmlHttp.readyState==2){
docuement.getElementById("result").innerHTML="正在加载信息...";
}else if(xmlHttp.readyState==3){
docuement.getElementById("result").innerHTML="正在连收数据...";
}else if(xmlHttp.readyState==4){//表示交互完毕
if(xmlHttp.status==200){//200对应ok ，
document.getElementById("result").innerHTML=xmlHttp.responseText;
}else{
docuement.getElementById(&qu
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
