ajax servlet怎么接收_被吹上天的Ajax到底是个啥？？

点击蓝字关注我们

                                                    后台回复【在吗】，每天一句鸡汤

什么是AJAX

AJAX(英文全称Asynchronous Javascript And Xml)

它能使用js访问服务器而且是异步访问，服务器给客户端的响应一般是整个页面，一个html完整页面

但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面，而只是数据。

他的表现形式有

text：纯文本

xml：可扩展标记语言

json：它是js提供的数据交互格式，它在ajax中最受欢迎

异步交互和同步交互

同步交互：

发一个请求，就要等待服务器的响应结束

然后才能发第二个请求，中间这段时间就是一个字“卡”，刷新的是整个页面

异步交互：

发一个请求后，无需等待服务器的响应

然后就可以发第二个请求，可以使用js接收服务器的响应，然后使用js来局部刷新

下面举一个异步交互的简单小例子：

windows.onload = function(){ //在文档加载完成后马上执行

// 得到btn元素

var btn=document.getElementById("btn");

// 给btn的click时间注册监听

btn.onclick = function(){ // 在按钮被点击时执行

// 获取h1元素对应的DOM对象

var h1 = document.getElementById("h1");

// 给h1添加内容

h1.innerHTML = "Hello JS!!!"; };

};

点击这里

AJAX的应用场景以及优缺点

应用场景：

>  百度的搜索框

>  用户注册时(校验用户名是否被注册过)

优点：

异步交互增强了用户的体验

性能方面：因为服务器无需再响应整个页面

只需要响应部分内容，所以服务器的压力减轻了

缺点：

AJAX不能应用于所有场景

AJAX无端的增多了对服务器的访问次数，给服务器带来了压力

AJAX发送异步请求(四步操作)

1.得到XMLHttpRequest

AJAX其实只需要学习一个对象：XMLHttpRequest

大多数浏览器都支持：

var xmlHttp = new XMLHttpRequest();

IE6.0:

var

xmlHttp=newActiveXObject(“Msxml2.XMLHTTP”);

IE5.5以前更早版本的IE：

var xmlHttp=newActiveXObect(“Microsoft.XMLHTTP”);

编写创建XMLHttpRequest对象的函数：

function createXMLHttpRequest(){

try{

return new XMLHttpRequest();

}catch(e){

try{

return newActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

return newActiveXObject("Microsoft.XMLHTTP");

}catch(e){

alert("哥们儿，你用的是什么浏览器啊？");

throw e;

}

}

}

}

2.打开与服务器的连接

xmlHttp.open():

用来打开与服务器的连接，它需要三个参数：

1>  请求方式：可以是GET或POST

2> 请求的URL：指定的服务器端资源，例如：/day23_1/AServlet

3> 请求是否为异步：如果为true表示发送异步请求，否则同步请求

xmlHttp.open(“GET”,"/day23_1/AServlet",true);

3.发送请求

xmlHttp.send(null):

如果不给可能造成部分浏览器无法发送

参数：就是请求体内容，如果是GET请求，必须给出null

4.在xmlHttp对象的一个事件上注册监听器：

onreadystatechange

xmlHttp对象一共有5个状态：

0状态：刚创建，还没有调用open()方法；

1状态：请求开始，调用了open()方法，但还没有调用send()方法

2状态：调用完了send()方法

3状态：服务器已经开始响应，但不表示响应结束了

4状态: 服务器响应结束(通常我们只关心最后这个状态)

得到xmlHttp对象的状态：

var state = xmlHttp.readyState;

//可能是0、1、2、3、4

得到服务器响应的状态码：

var status = xmlHttp.status;

//例如200、404、500

得到服务器响应的内容:

var content = xmlHttp.responseText;

//得到服务器响应的文本格式内容

var content = xmlHttp.responseXML;

//得到服务器响应的xml响应内容，它是Document对象了

xmlHttp.onreadystatechange = function()

{//xmlHttp的5钟状态都会调用本方法

//双重判断：判断是否为4状态，而且还要判断是否为200

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

//获取服务器的响应内容

var text = xmlHttp.responseText;

}

};

下面是一些关于ajax的应用实例

第一例：打印 Hello World

(Servlet): 

public class AServlet extends

HttpServlet{

public void doGet(HttpServletRequest request, HttpServletResponse response) 

throws ServletException, IOException{

System.out.println("Hello AJAX!");

response.getWriter().print("Hello AJAX!!！");

}

}

(jsp):

// 创建异步对象

function createXMLHttpRequest(){

try{

return new XMLHttpRequest();

}catch(e){

try{

return 

new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

return

new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){

alert("哥们儿，你用的是什么浏览器啊？");

throw e;

}

}

}

}

windows.onload = function(){ //在文档加载完成后马上执行

// 得到btn元素

var btn=document.getElementById("btn");

// 给btn的click事件注册监听

btn.onclick = function(){ // 在按钮被点击时执行

/* ajax四步操作，得到服务器的响应，把响应结果显示到h1元素中 */

//1.得到异步对象

var xmlHttp = createXMLHttpRequest();

//2.打开与服务器的连接

*指定请求方式

*指定请求的URL

*指定是否为异步

xmlHttp.open("GET", true);

//3.发送请求

xmlHttp.send(null); //GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送

//4.给异步对象的onreadystatechange事件注册监听器

xmlHttp.onreadystatechange = function()

{//当xmlHttp的状态发生变化时执行

//双重判断：xmlHttp判断是否为4状态(服务器响应结束)，而且还要判断服务器响应的状态码是否为200(响应成功)

if(xmlHttp.readyState==4&&xmlHttp.status == 200){

//获取服务器的响应内容

var text = xmlHttp.responseText;

// 获取h1元素

var h1 = document.getElementById("h1");

h1.innerHTML = text;

}

};

};

};

点击这里

第二例：发送POST请求

(如果发送请求时需要带有参数，一般都用post请求)

open: xmlHttp.open(“POST”…);

添加一步：设置Content-Type请求头：

xmlHttp.setRequestHeader(“Content-Type”“application/x-www-formurlencoded”);

//发送请求时指定请求体

send:xmlHttp.send(“username =zhangSan&password = 123”);

(Servlet)：

public class AServlet extends

HttpServlet{

public

void

doGet(HttpServletRequestrequest, HttpServletResponse response) throws 

ServletException, IOException{

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("UTF-8");

//获取请求参数

String username=request.getParameter("username");

System.out.println("(POST:)Hello AJAX!" + username);

response.getWriter().print("(POST:)Hello AJAX!!！" + username);

}

}

(jsp) ：

// 创建异步对象

function createXMLHttpRequest(){

try{

return new XMLHttpRequest();

}catch(e){

try{

return newActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

return newActiveXObject("Microsoft.XMLHTTP");

}catch(e){

alert("哥们儿，你用的是什么浏览器啊？");

throw e;

}

}

}

}

windows.onload = function(){ //在文档加载完成后马上执行

// 得到btn元素

var btn=document.getElementById("btn");

// 给btn的click事件注册监听

btn.onclick = function(){ // 在按钮被点击时执行

/* ajax四步操作，得到服务器的响应，把响应结果显示到h1元素中 */

//1.得到异步对象

var xmlHttp = createXMLHttpRequest();

//2.打开与服务器的连接

*指定请求方式

*指定请求的URL

*指定是否为异步

//修改open方法，指定请求方式为POST

xmlHttp.open("GET",", true);

//设置请求头：Content-Type

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//3.发送请求

xmlHttp.send("username=zhangSan&password = 123"); 

//4.给异步对象的onreadystatechange事件注册监听器

xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行

//双重判断：xmlHttp判断是否为4状态(服务器响应结束)，而且还要判断服务器响应的状态码是否为200(响应成功)

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

//获取服务器的响应内容

var text = xmlHttp.responseText;

// 获取h1元素

var h1 = document.getElementById("h1");

h1.innerHTML = text;

}

};

};

};

点击这里

第三例：注册表单之检验用户是否注册

1.编写页面：(ajax3.jsp)

给出注册表单页面

给用户名文本框添加onblur事件的监听

获取文本框的内容，通过ajax4步发送给服务器，得到响应结果

* 如果是1：在文本框后显示"用户名已被注册"

* 如果是0：什么都不做

2.编写Servlet(ValidateUsernameServlet)

获取客户端传递的用户名参数

判断是否为itcast

* 是：返回1

* 否：返回0

(ajax3.jsp)

// 创建异步对象

function createXMLHttpRequest(){

try{

return new XMLHttpRequest();

}catch(e){

try{

return newActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

return newActiveXObject("Microsoft.XMLHTTP");

}catch(e){

alert("哥们儿，你用的是什么浏览器啊？");

throw e;

}

}

}

}

window.onload = function(){

//获取文本框，给它的失去焦点事件注册监听

var userEle=document.getElementById("usernameEle");

userEle.onblur = function(){

//1.得到异步对象

var xmlHttp = createXMLHttpRequest();

//2.打开连接

xmlHttp.open("POST","",true);

//3.设置请求头：Content-Type

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//4.发送请求，给出请求体

xmlHttp.send("username="+userEle.value);

//5.给xmlHttp的onreadystatechange事件注册监听

xmlHttp.onreadystatechange = function(){

//双重判断

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

//获取服务器的响应，判断是否为1

//是：获取span，添加内容："用户名已被注册"

var text = xmlHttp.responseText;

if(text == "1"){

//得到span元素

var span=document.getElementById("errorSpan");

span.innerHTML = "用户名已被注册！";

}

};

};

};

演示用户名是否被注册

用户名：

密码：

(ValidateUsernameServlet)：

public class AServlet extends HttpServlet{

public void doPost(HttpServletRequest request, HttpServletResponse response) 

throws ServletException, IOException{

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("UTF-8");

/*

1.获取参数username

2.判断是否是itcast

3.如果是：响应1  否则响应0

*/

String username=request.getParameter("username");

if(username.equalsIgnoreCase("itcast")){

response.getWriter().print("1");

}

else{

response.getWriter().print("0");

}

}

  扫码关注我们  

做一个开心的人