Ajax实例

最新推荐文章于 2024-09-12 10:35:21 发布

anhuixiaozi

最新推荐文章于 2024-09-12 10:35:21 发布

阅读量656

点赞数

文章标签： ajax xmlhttprequest 服务器 function url import

本文链接：https://blog.csdn.net/anhuixiaozi/article/details/5900741

版权

在拜读网上对ajax的介绍文章，写了一个非常简单的例子，存档用。

1）文件ajax.html

//创建xmlHttp对象
function createxmlHttpRequest() {
  if (window.ActiveXObject) {
   xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
  }else if (window.xmlHttpRequest) {
    xmlHttp = new xmlHttpRequest();
  }
}

function getName() {

  //创建xmlHttp对象
  createxmlHttpRequest();

   //调回调函数
  //var name = document.getElementById("name").value.toString();
  var name = document.all.name.value;
  xmlHttp.onreadystatechange = handleStateChange;
   var url = "ajaxForm.jsp?name="+name;
  xmlHttp.open("GET", url,false);
  xmlHttp.setRequestHeader("Content-Type","text/html; charset=gb2312");
  xmlHttp.send(null);
}

// 回调函数
function handleStateChange() {

  if ( xmlHttp.readyState == 4 ) {

   // 收到完整的服务器响应
   if ( xmlHttp.status == 200 ) {

//HTTP服务器响应的值OK
ret = xmlHttp.responseText;

    document.getElementById("myDiv").innerHTML="<font color='green'>"+ ret + "</font>";;
   }
  }
}
</script>
</head>
<body>
  <form>
   输入姓名：
   <input type=text id="name">
   <input type="button" name=button value="提交" οnclick="getName();" />
  </form>
  <div id="myDiv">
  </div>
</body>
</HTML>

2）文件ajaxForm.jsp
<%@ page contentType="text/html; charset=gb2312"%>
<%@ page import="java.io.*"%>
<%@ page import="javax.servlet.*"%>
<%@ page import="javax.servlet.http.*"%>
<%@ page import="java.util.*"%>

注意点：

路径千万别弄错，不然 xmlHttp.status 可能不为200，导致不能收到完整的服务器响应

1）相对路径可以这么写：url = "ajaxForm.jsp?name="+name;

2）绝地路径可以这么写：url = "/工程名/ajaxForm.jsp所在文件夹名/ajaxForm.jsp?name="+name;

3）如果工程发布到web容器Root目录下可以这样写： url = "/ajaxForm.jsp所在文件夹名/ajaxForm.jsp?name="+name;

补充知识：

（一）XMLHttpRequest 对象的三个重要的属性

1） onreadystatechange 属性存有处理服务器响应的函数

如： xmlHttp.onreadystatechange=function() {

// 我们需要在这里写一些代码

}

2） readyState 属性

0：请求未初始化（在调用 open() 之前）

1：请求已提出（调用 send() 之前）

2：请求已发送（这里通常可以从响应得到内容头部）

3：请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）

4：请求已完成（可以访问服务器响应并使用它）

如：

xmlHttp.onreadystatechange=function() {

if( xmlHttp.readyState==4 ) {

// 从服务器的response获得数据

}

3） responseText 属性可以通过 responseText 属性来取回由服务器返回的数据

如：

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState==4) {

document.myForm.time.value= xmlHttp.responseText ;

}

（二）xmlhttp:open方法
创建一个新的http请求，并指定此请求的方法、URL以及验证信息
语法
oXMLHttpRequest.open( bstrMethod , bstrUrl , varAsync, bstrUser , bstrPassword );
参数
bstrMethod
http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
/*****
POST：用"POST"方式发送数据,可以大到4MB
GET：用"GET"方式发送数据,只能256KB
如果请求带有参数的化实用POST方式，POST方式将参数放置在页面的隐藏控件内
没有参数使用GET方式
对于请求的页面在中途可能发生更改的，也最好用POST方式
用GET方式可能会拿不到最新的信息
*****/
bstrUrl
请求的URL地址，可以为绝对地址也可以为相对地址。
varAsync[可选]
布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
bstrUser[可选]
如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
bstrPassword[可选]
验证信息中的密码部分，如果用户名为空，则此值将被忽略。

（三） XMLHTTP.SEND(varBody)

varBody：指令集。可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。也可以省略，让指令通过Open方法的URL参数代入。发送数据的方式分为同步和异步两种。在异步方式下，数据包一旦发送完毕，就结束Send进程，客户机执行其他的操作；而在同步方式下，客户机要等到服务器返回确认消息后才结束Send进程。

方法一：varBody省略，让指令通过Open方法的URL参数代入
var post="id=1000&page=1";
var doUrl="t.asp"+post
XMLHttp.open("POST", doUrl, false);
XMLHttp.send(null);

这种方法在ASP中直接利用Request.QueryString("参数名称")

方法二：varBody为字符串，Open方法定义为POST，以表单方式上传
   var post="id=1000&page=1";
   var doUrl="t.asp";
   XMLHttp.open("POST", doUrl, false);
   XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   XMLHttp.send(post);

这种方法在ASP中直接利用Request.Form("参数名称")

方法三：varBody为XML格式数据
   var xmlDom=new ActiveXObject("MSXML2.DOMDocument");
         xmlDom.loadXML("<userInfo><userName>用户名称</userName><userSex>男</userSex><userTel>028</userTel><userEmail></userEmail></userInfo>");
     XMLHttp.open("POST", "t.asp", false);
     XMLHttp.send(xmlDom.xml);

当以这种方法传递时，服务端用
   <%
   Response.ContentType="text/xml"
   Response.Charset="gb2312"
   Dim xmlDom
   Set   xmlDom = Server.CreateObject("Microsoft.XMLDOM")
           xmlDom.async = True
           xmlDom.load(Request)
   Response.Write   xmlDom.xml
   %>

即可，在此XM中L获取相关内容