初识Ajax

发布时间：2020-12-15 21:59:54 所属栏目：百科来源：网络整理

导读：Ajax实现一步交互数据,看实例,来说事准备一个JS文件,初始化XMLHttpRequest对象并实现XMLHttpRequest的几个函数 open(menthod,url,asynch) send(null) onreadystatechang 主要的三个函数,那么,首先来初始化我么的XMLHttpRequest对象在初始化该对象我么创建

Ajax实现一步交互数据,看实例,来说事

准备一个JS文件,初始化XMLHttpRequest对象
并实现XMLHttpRequest的几个函数
open(menthod,url,asynch)

send(null)

onreadystatechang

主要的三个函数,那么,首先来初始化我么的XMLHttpRequest对象

在初始化该对象我么创建一个函数为其初始化,直接调用即可,初始化XMLHttpRequest对象是固定好的,你可以直接Copy

//当页面加载完毕后执行下面的代码
window.onload = function(){

document.getElementById("oks").onclick = function(){

//第一步:初始化对象
var xhr = ajaxFunction();

//第二步:进行客户端与服务器的连接

//第一个参数:可以是GET 或者 POST
//第二个参数:请求路径,可以是绝对路径也可以是相对路径
//第三个参数:是否实现异步传输数据,默认为true(异步)
xhr.open("GET",../testServlet?timeStamp="+new Date().getTime() + "&c=9",true);

//第三步:客户端向服务器发送请求
//如果客户端的请求类型是GET方式,利用send()方法发送请求数据，服务器端接收不到
// 但是不省略，要写成：xhr.send(null);
xhr.send("a=7&b=8");//如果不信可以加入参数,服务器端接收不了 //xhr.send(null);

//第四步: 服务器端向客户端进行响应
XMLHttpRequest对象的onreadystatechange属性：监听服务器端的通信状态

xhr.onreadystatechang = function(){

if(xhr.readyState == 4){
var data = responseText;
alert(data);
}
}
}

//初始化XMLHttpRequest代码
function ajaxFunction(){

var xmlHttp;

try{
//支持FireFox,Open 8.0 ...
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}

}
return xmlHttp;
}

}

test.jsp

<head>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded">

<input type="button" name="ok" id="oks" value="测试服务器连接">
</form>
</body>

TestServlet.java
需要注意的是,在配置文件中的URL路径需要和xhr.open("GET",true);中的第二参数URL一致
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();

System.out.println("Connection service success!");

System.out.println("a = " + request.getParameter("a"));
System.out.println("b = " + request.getParameter("b"));
//所以说,在JS文件中的请求参数是可以正常获取的
System.out.println("c = " + request.getParameter("c"));
System.out.println("time = " + request.getParameter("timeStamp"));

//向客户端进行响应数据
pw.print("我是服务器,你请求的数据,我现在处理好了,返回给你了现在...");

我么服务器响应数据都是通过“流”进行数据的传输的

好的,通过上面的实例,我么已经对Ajax已经有初步的认识了....

希望对各位有帮助.......................................................................

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!