并不是新的技术,只是把原有的技术,整合到一起而已
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
19
1
function ajaxFunction(){
2
var xmlHttp;
3
try{ // Firefox, Opera 8.0+, Safari
4
xmlHttp=new XMLHttpRequest();
5
}
6
catch (e){
7
try{// Internet Explorer
8
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
9
}
10
catch (e){
11
try{
12
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
13
}
14
catch (e){}
15
}
16
}
17
18
return xmlHttp;
19
}
get请求
function getFun() {
//创建对象
var request = ajaxFunction();
/*
参数一: 请求类型 GET or POST
参数二: 请求的路径
参数三: 是否异步, true or false
*/
//发送请求
request.open("GET","http://localhost:8080/HttpServletRequestDemo1?username=mlj",true);
//获取响应的数据
request.onreadystatechange = function(){
//前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
};
request.send();
}
post请求
function postFun() {
//创建对象
var request = ajaxFunction();
//发送数据
request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
request.send();
}
//带数据过去
function postFun() {
//创建对象
var request = ajaxFunction();
//发送数据
request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
//如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 , 在send方法里面写表单数据。
request.send("username=aobama");
}
//获取数据
function postFun() {
//创建对象
var request = ajaxFunction();
//发送数据
request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
//想获取服务器传送过来的数据, 加一个状态的监听。
request.onreadystatechange=function(){
if(request.readyState==4 && request.status == 200){
alert("post:"+request.responseText);
}
}
//如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 , 在send方法里面写表单数据。
request.send("username=aobama");
}
38
1
function postFun() {
2
//创建对象
3
var request = ajaxFunction();
4
//发送数据
5
request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
6
request.send();
7
}
8
//带数据过去
9
function postFun() {
10
//创建对象
11
var request = ajaxFunction();
12
//发送数据
13
request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
14
//如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
15
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
16
17
//带数据过去 , 在send方法里面写表单数据。
18
request.send("username=aobama");
19
}
20
//获取数据
21
function postFun() {
22
//创建对象
23
var request = ajaxFunction();
24
//发送数据
25
request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
26
//想获取服务器传送过来的数据, 加一个状态的监听。
27
request.onreadystatechange=function(){
28
if(request.readyState==4 && request.status == 200){
29
30
alert("post:"+request.responseText);
31
}
32
}
33
//如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
34
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
35
36
//带数据过去 , 在send方法里面写表单数据。
37
request.send("username=aobama");
38
}
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
0-4状态
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 302重定向 500服务器内部错误或发出程序异常 |
get()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"></div>
<script src="../js/jquery-1.11.0.js"></script>
<script>
$.get("/ServletTest?username=mljqqhq",{ name: "John", },function (data,status) {
$("#div1").html(data+status);//data是服务器响应的数据
})
</script>
</body>
</html>
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
</head>
7
<body>
8
<div id="div1"></div>
9
<script src="../js/jquery-1.11.0.js"></script>
10
<script>
11
$.get("/ServletTest?username=mljqqhq",{ name: "John", },function (data,status) {
12
$("#div1").html(data+status);//data是服务器响应的数据
13
14
})
15
</script>
16
17
</body>
18
</html>
post()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"></div>
<script src="../js/jquery-1.11.0.js"></script>
<script>
$.post("/ServletTest",{"username":"mljqqhpost"},function (data,status) {
$("#div1").html(data+status);//data是服务器响应的数据
})
</script>
</body>
</html>
x
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
</head>
7
<body>
8
<div id="div1"></div>
9
<script src="../js/jquery-1.11.0.js"></script>
10
<script>
11
$.post("/ServletTest",{"username":"mljqqhpost"},function (data,status) {
12
$("#div1").html(data+status);//data是服务器响应的数据
13
14
})
15
</script>
16
17
</body>
18
</html>
ajax()
$.ajax({
url:"/ajaxDemo",
data:{"name":"哈哈哈","age":4},
async:true,
type:"GET",
dataType:"text",
success:function (succRes) {
alert(succRes);
},
error:function (errorRes) {
alert("出现异常了")
}
});
1
$.ajax({
2
url:"/ajaxDemo",
3
data:{"name":"哈哈哈","age":4},
4
async:true,
5
type:"GET",
6
dataType:"text",
7
success:function (succRes) {
8
alert(succRes);
9
},
10
error:function (errorRes) {
11
alert("出现异常了")
12
}
13
});
![](https://img2018.cnblogs.com/blog/1157177/201903/1157177-20190308083538263-1602355436.jpg)