Ajax

一、Ajax概述

Asynchronous Javascript And XML异步JavaScript和XML
并不是新的技术,只是把原有的技术,整合到一起而已。

1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
  • 作用:

    刷新局部内容


二、数据请求 Get

创建一个demo01.jsp页面:主要去写浏览器点击按钮后通过ajax方式获得数据请求,servlet得到反馈。

数据请求中的Get思路:

1
2
3
4
5
6
1.在body里面写一个点击按钮 onclick="get()"
2.在head里面引入js代码写get()方法具体实现。
2.1 主要是去创建对象(调用我们写好的ajaxFunction()方法 ---在F盘的jar文件内)
2.2 使用open()方法可以添加数据--发送请求
2.3 使用request.onreadystatechange=function(){}--判断是不是准备好了
2.4 使用send()方法

jsp页面的主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript"> <!--使用jS文件-->

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;
}

function get(){
//1.创建xmlhttprequest对象
var request=ajaxFunction(); <!--调用写好的创建对象的方法 -->
//2.发送请求
request.open("GET","/day16/DemoSerlvet01?name=aa&age=18",true); // 第一个参数:get/post 第二个:相对路径 默认从 项目开始 所以只用写servlet的代码 第三个: true(异步) /false(同步)

//3.获取响应数据
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200) // (4)已经能够正常处理 && 判断状态码是不是200
{
alert(request.responseText); //弹出信息
}
}
request.send();
}

</script>
</head>

<body>
<h3><a href="" onclick="get()">使用Ajax方式发送Get请求</a></h3>
</body>

DemoSerlvet01主要去写输出:

1
2
3
4
5
6
7
8
9
10
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取传入的信息
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name+" "+age);

//通过alert的方式弹出
response.setContentType("text/html;charset=utf-8"); //response解决方法加一行代码 而request可以加代码/tomcat永久更改(之前博客写过方法)
response.getWriter().write("啊啊");
}

最终点击jsp页面的一行弹出alert提示:java控制台输出获取的信息


三、数据请求 Post

跟get的差距:

  1. 只是在open里面要是传输数据需在send()里面写。
  2. 传输数据必须现有头部
1
2
3
4
5
6

//如果是post方式就必须要添加头 --说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//post不能根据open带过去
request.send("name=aa&age=18");

与get方法的前三步骤一样(不带参数):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function post(){
//1.创建xmlhttprequest对象
var request=ajaxFunction(); <!--调用写好的创建对象的方法 -->
//2.发送请求
request.open("POST","/day16/DemoSerlvet01",true); // 第一个参数:get/post 第二个:相对路径 默认从 项目开始 所以只用写servlet的代码 第三个: true(异步) /false(同步)

//3.获取响应数据
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200) // 已经能够正常处理 && 判断状态码是不是200
{
alert(request.responseText);
}
}

//如果是post方式就必须要添加头 --说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//post不能根据open带过去
request.send("name=aa&age=18");
}

主要代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript"> <!--使用jS文件-->

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;
}

function post(){
//1.创建xmlhttprequest对象
var request=ajaxFunction(); <!--调用写好的创建对象的方法 -->
//2.发送请求
request.open("POST","/day16/DemoSerlvet01","true"); // 第一个参数:get/post 第二个:相对路径 默认从 项目开始 所以只用写servlet的代码 第三个: true(异步) /false(同步)

//3.获取响应数据
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200) // 已经能够正常处理 && 判断状态码是不是200
{
alert(request.responseText);
}
}

//如果是post方式就必须要添加头 --说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//post不能根据open带过去
request.send("name=aa&age=18");
}

</script>
</head>
<body>
<h3><a href="" onclick="post()">使用Ajax方式发送Post请求</a></h3>
</body>

DemoSerlvet01主要去写输出:

1
2
3
4
5
6
7
8
9
10
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取传入的信息
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name+" "+age);

//通过alert的方式弹出
response.setContentType("text/html;charset=utf-8"); //response解决方法加一行代码 而request可以加代码/tomcat永久更改(之前博客写过方法)
response.getWriter().write("啊啊");
}

四、部分方法解析#

创建xmlhttprequest对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}

open()方法

  1. 第一个参数: GET/POST
  2. 第二个参数: 相对地址(相对于localhost:8080中的8080) 一般是 “/项目名/servlet名字” (GET的方式可以直接?name=lisi&age=18;而POST的方式只能在send里面写,而且要加头)
  3. 第三个参数: true(异步)/false(同步)
1
request.open("GET","/day16/DemoSerlvet01?name=aa&age=18",true);

onreadystatechange=function(){}–判断状态##

1
2
3
4
5
6
7
//固定的格式:
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200) // 已经能够正常处理 && 判断状态码是不是200
{
alert(request.responseText); //配合request.responseText使用
}
}

readystate状态集:

status的状态集:

send()方法

1
2
3
4
5
6
7
8
9
10
	//如果是post方式就必须要添加头  --说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//post不能根据open带过去
request.send("name=aa&age=18");

// -----------------------------------------------

//get方式
request.send();

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 一、Ajax概述
  2. 2. 二、数据请求 Get
  3. 3. 三、数据请求 Post
  4. 4. 四、部分方法解析#
    1. 4.1. 创建xmlhttprequest对象
    2. 4.2. open()方法
    3. 4.3. onreadystatechange=function(){}–判断状态##
    4. 4.4. send()方法
,