Ajax:是什么?
- 使用css和XHTML来表示。
- 使用DOM模型来交互和动态显示。
- 使用XMLHttpRequest来和服务器进行异步通信。
- 使用JavaScript来绑定和调用。
练习代码
有什么用?
- 咱们的网页如果想要刷新局部内容,那么需要重新载入整个网页,用户体验不是很好.就是为了解决局部刷新问题,其他部分不动,只改变更新了的地方.
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
数据请求: Get
创建对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18function 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;
}发送请求:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//执行get请求
function get() {
//1.创建xmlhttprequest 对象
var request = ajaxFunction();
//2.发送请求
/*
参数1:请求类型 GET or POST
参数2:请求的路径
参数3:是否同步 true or false
*/
request.open("GET","/ajax/DemoServlet01",true);
request.send();
}
如果发送请求的同时,还想获取数据,那么代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 //执行get请求
function get() {
//1.创建xmlhttprequest 对象
var request = ajaxFunction();
//2.发送请求
request.open("GET","/ajax/DemoServlet01?name=aa&age=18",true);
//3.获取响应数据 注册监听的意思,一会儿准备的状态发生了改变,那么就执行等号右边的方法
request.onreadystatechange = function(){
//前半段表示已经能够正常处理,再判断状态码是否是200
if(request.readyState == 4 && request.status == 200) {
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
数据请求: Post
创建对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18function 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;
}发送请求:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23function post() {
//1.创建对象
var request = ajaxFunction();
//2.发送请求
request.open("POST","/ajax/DemoServlet01",true);
request.send();
}
如果发送请求的同时要带数据过去:
function post() {
//1.创建对象
var request = ajaxFunction();
//2.发送请求
request.open("POST","/ajax/DemoServlet01",true);
//如果使用的是post方式带数据,那么要添加头,说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//要将数据发送到服务器 在send方法里写表单数据
request.send("name=bb&age=19");
}
如果发送请求的同时,还想获取数据,那么代码如下:
1 | //执行post请求 有响应的 |
