转贴:JavaScript实现Ajax请求简单示例

时间:2022-03-18 09:59:08

转至:https://my.oschina.net/u/658145/blog/167651

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> Ajax </title>

<script type="text/javascript">

var xmlHttpReq = null;//XMLHttpRequest对象 // 去除字符串两边空格

String.prototype.trim = function () {

return this.replace(/(^\s*)|(\s*$)/g, "");

} // 创建XMLHttpRequest对象

function createXMLHttpRequest() {

if (window.XMLHttpRequest) {// IE 7.0及以上版本和非IE的浏览器

xmlHttpReq = new XMLHttpRequest();

} else

{

// IE 6.0及以下版本 t

ry { xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP");

}catch (e) {

try {

xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

}catch (e) {}

}

} if (!xmlHttpReq) {

alert("当前浏览器不支持!");

return null; }

return xmlHttpReq; } //Ajax请求

function tiplist(txt,requestMethod){

var txtValue = txt.value.trim(); if(txtValue!=""){

var parameter = "code="+txtValue+"&str=中文";

var requestURL = "http://127.0.0.1:8080/MyProj/ShowServlet";

xmlHttpReq = createXMLHttpRequest();

if("GET" == requestMethod.trim().toUpperCase()){

xmlHttpReq.open("GET",encodeURI(EncodeURI(requestURL+"?"+parameter)),true);

xmlHttpReq.setRequestHeader("If-Modified-Since","0"); xmlHttpReq.send("null");

}else if("POST" == requestMethod.trim().toUpperCase()){ xmlHttpReq.open("POST",requestURL,true);

xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

xmlHttpReq.send(encodeURI(encodeURI(parameter))); }else{ alert("错误的请求方式!");

return; } xmlHttpReq.onreadystatechange = function(){ if(xmlHttpReq.readyState == 4){

switch(xmlHttpReq.status){ case 200:

//var datas = xmlHttpReq.responseXML.getElementsByTagName("data");

//alert(datas.length); document.getElementById("downlist").innerHTML = xmlHttpReq.responseText;

break; case 400: alert("错误的请求!\nError Code:400!"); break;

case 403: alert("拒绝请求!\nError Code:403!"); break;

case 404: alert("请求地址不存在!\nError Code:404!");

break; case 500: alert("内部错误!\nError Code:500!");

break; case 503: alert("服务不可用!\nError Code:503!");

break; default: alert("请求返回异常!\nError Code:"+xmlHttpReq.status);

break; } } } } } </script> </head> <body>

<input type="text" id="txt"name="txt"value=""onkeyup="tiplist(this,'post');" /><br/><br/>

<divid="downlist"style="width:200px;height:300px;background:gray;"></div> </body> </html>