在使用AJAX容易出现的几个小问题
1.提交参数包含中文时,获取不到中文值
var keywords = escape(document.getElementById("keywords").value);//escape()解决中文参数
2.POST提交获取不到参数值
xmlHttp.setrequestheader("content-length",postdata.length);
xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded");
假如以上两句话就可以了
3:为了兼容大部分的浏览器，最好在创建XMLHttpRequest的时候加入完整的判断不要简单的用
var req; //定义变量，用来创建xmlhttprequest对象
function creatReq() // 创建xmlhttprequest,ajax开始
{
if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE浏览器用activexobject对象创建
{
req=new ActiveXObject("Microsoft.XMLHttp");
}
4:我经常犯的的一个错误就是xmlreq.onreadystatechange = CheckState();//制定相应的函数
这样写是错误的，函数的括号是不需要的。
Code
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax example</title>
<script type="text/javascript">
var xmldoc
function createxmldoc(){
if(window.XMLHttpRequest){
xmldoc = new XMLHttpRequest();///非IE浏览器，用xmlhttprequest对象创建
if(xmldoc.overrideMimeType){
xmldoc.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
try{
xmldoc = new ActiveXObject("Msxml4.XMLHTTP");///IE浏览器用activexobject对象创建
}catch(e){
try{
xmldoc = new ActiveXObject("Msxml3.XMLHTTP");
}catch(e){
try{
xmldoc = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmldoc = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
}
}
if(!xmldoc){
return false;
}
}
//发送get请求函数
function send(){
xmldoc = false
createxmldoc()
var url="/jsp/qq/ajax2.jsp?id=11&id2=22";
xmldoc.open("GET",url,true);
xmldoc.onreadystatechange = CheckState1;//制定相应的函数
xmldoc.send(null);//发送请求
}
//发送post请求函数
function sendPost(){
xmldoc = false
createxmldoc()
var url="/jsp/qq/ajax2.jsp";
var param="id=1&id2=2";
xmldoc.open("POST",url,true);
xmldoc.setrequestheader("content-length",param.length); //post提交设置项
xmldoc.setrequestheader("content-type","application/x-www-form-urlencoded");//post提交设置项
xmldoc.onreadystatechange = CheckState2;//制定相应的函数
xmldoc.send(param);//发送请求
}
function CheckState1(){
if(xmldoc.readyState == 4){
if(xmldoc.status == 200){
document.getElementById("messagecontent").innerHTML=xmldoc.responseText;
}
else{
document.getElementById("messagecontent").innerHTML="正在加载数据,请稍等
";
}
}
}
function CheckState2(){
if(xmldoc.readyState == 4){
if(xmldoc.status == 200){
document.getElementById("messagecontent2").innerHTML=xmldoc.responseText;
}
else{
document.getElementById("messagecontent2").innerHTML="正在加载数据,请稍等";
}
}
}
</script>
</head>
<body>
<div>this is ajax example</div>
<div id="messagecontent"></div>
<div id="messagecontent2"></div>
</body>
<script type="text/javascript">
window.setInterval("send()",2000);
window.setInterval("sendPost()",2000);
</script>
</html>
ajax2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String id=request.getParameter("id");
String id2=request.getParameter("id2");
out.println("<div>ajax post方法返回的值是"+id+id2+"</div>");
%>
</body>
</html>
用AJAX的Get和Post调用Servlet的简单示例。
Code
***************************************AJAX网页代码****************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
function createQueryString()
{
var firstName=document.getElementById("firstname").value;
var middleName=document.getElementById("middleName").value;
var birthday=document.getElementById("birthday").value;
var queryString="firstName=" + firstName + "&middleName=" + middleName + "&birthday=" + birthday;
return queryString;
}
function doRequestUsingGET()
{
createXMLHttpRequest();
var queryString="../GetAndPost?";
queryString=queryString+createQueryString() + "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET",queryString,true);
xmlHttp.send(null);
}
function doRequestUsingPost()
{
createXMLHttpRequest();
var url="../GetAndPost?timeStamp=" + new Date().getTime();
var queryString=createQueryString();
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}
function handleStateChange()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
parseResults();
}
}
}
function parseResults()
{
var responseDiv=document.getElementById("serverResponse");
if(responseDiv.hasChildNodes())
{
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText=document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="#">
<p><br />
<br />
<input name="firstName" type="text" id="firstName" />
</p>
<p>
<label>
<input type="text" name="middleName" id="middleName" />
</label>
</p>
<p>
<input name="birthday" type="text" id="birthday" />
</p>
<p> </p>
<p>
<input type="button" name="Submit" value="GET" onclick="doRequestUsingGET();"/>
<input type="button" name="Submit2" value="POST" onclick="doRequestUsingPost();"/>
</p>
<div id="serverResponse"></div>
</form>
</body>
</html>
***********************************Servlet代码*****************
package temp;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class GetAndPostExample extends HttpServlet{
protected void processRequest(HttpServletRequest request,HttpServletResponse response,String method) throws ServletException,IOException
{
response.setContentType("text/xml");
String firstName=request.getParameter("firstName");
String middleName=request.getParameter("middleName");
String birthday=request.getParameter("birthday");
String responseText="hello:" + firstName + "-" + middleName + "。your birthday is " + birthday + "。" + "[method:" + method + "]";
PrintWriter out=response.getWriter();
out.println(responseText);
out.close();
}
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException
{
processRequest(request,response,"GET");
}
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException
{
processRequest(request,response,"POST");
}
}
**************************
加上设置字符编码的方法：
response.setHeader("charset","gb2312");
看到的说明原文如下：
用AJAX来GET回一个页面时，RESPONSETEXT里面的中文多半会出现乱码，这是因为xmlhttp在处理返回的 responseText的时候，是把resposeBody按UTF-8编码进解码考形成的，如果服务器送出的确实是UTF-8的数据流的时候汉字会正确显示，而送出了GBK编码流的时候就乱了。解决的办法就是在送出的流里面加一个HEADER，指明送出的是什么编码流，这样XMLHTTP就不会乱搞了。
PHP:header('Content-Type:text/html;charset=GB2312');
ASP:Response.Charset("GB2312")
JSP:response.setHeader("Charset","GB2312");
AJAX ResponseXML 实例
在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从数据库中读取信息。这次，这些从数据库中选取的数据将被转换为 XML 文档，然后我们将使用 DOM 来提取要显示的值。
AJAX 实例解释
上面的例子包含一个 HTML 表单，若干个保留所返回数据的 <span> 元素，以及指向一段 JavaScript 的链接：
<html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body>
<form action="">
<label>选择客户：
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select></label>
</form>
<b><span id="companyname"></span></b><br />
<span id="contactname"></span><br />
<span id="address"></span>
<span id="city"></span><br/>
<span id="country"></span>
</body>
</html>上面的例子包含了一个 HTML 表单，该表单带有一个名为 "customers" 下拉框。
当用户选取下拉框中的客户时，函数 "showCustomer()" 就会被执行。事件 "onchange" 会触发该函数执行。换句话说，每当用户改变下拉框中的值时，函数 showCustomer() 就会被调用。
下面列出了 JavaScript 代码。
AJAX JavaScript
这是存储在文件 "selectcustomer_xml.js" 中的 JavaScript 代码：
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="getcustomer_xml.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
var xmlDoc=xmlHttp.responseXML.documentElement;
document.getElementById("companyname").innerHTML=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
document.getElementById("contactname").innerHTML=
xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
document.getElementById("address").innerHTML=
xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("country").innerHTML=
xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}showCustomer() 和 GetXmlHttpObject() 与上一节相同。stateChanged() 函数稍早前也在本教程中使用过。不过，这次我们通过 responseXML 以 XML 文档返回结果，并使用 DOM 来提取要显示的值。
AJAX 服务器页面
这个被 JavaScript 调用的服务器页面，是名为 "getcustomer_xml.asp" 的简单 ASP 文件。
该页面使用 VBScript 编写，针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言，简单地重写该页面。
请看在 PHP 中对应的例子（测试：缺具体页面）。
这段代码执行针对数据库的 SQL 查询，并以 XML 文档返回结果：
<%
response.expires=-1
response.contenttype="text/xml"
sql="SELECT * FROM CUSTOMERS "
sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"
on error resume next
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
if err <> 0 then
response.write(err.description)
set rs=nothing
set conn=nothing
else
response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.write("<company>")
response.write("<compname>" &rs.fields("companyname")& "</compname>")
response.write("<contname>" &rs.fields("contactname")& "</contname>")
response.write("<address>" &rs.fields("address")& "</address>")
response.write("<city>" &rs.fields("city")& "</city>")
response.write("<country>" &rs.fields("country")& "</country>")
response.write("</company>")
end if
on error goto 0
%>请注意上面的 ASP 代码中的第二行：response.contenttype="text/xml"。ContentType 属性为 response 对象设置了 HTTP 内容类型。该属性的默认值是 "text/html"。这次我们把内容类型设置为 XML。
然后我们从数据库中选取数据，并使用这些数据构建 XML 文档。
Code
