jquery如何实现ajax技术,使用JavaScript和jQuery简单实现Ajax技术(示例代码)

Ajax的定义

Ajax被认为是(Asynchronous JavaScript and XML的缩写)。 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

一、使用JavaScript实现Ajax技术

1.首先建立一个jsp页面,导入js页面并且新建一个测试按钮。

2.其中我们在js页面先需要获取XmlHttpRequest对象,并且需要处理兼容问题

获取XmlHttpRequest对象functiongetXMLHttpRequest() {var xmlHttpReq=null;if (window.XMLHttpRequest) {//Mozilla 浏览器

xmlHttpReq = newXMLHttpRequest();

}else{if (window.ActiveXObject) {//IE 浏览器

try{

xmlHttpReq= new ActiveXObject("Microsoft.XMLHTTP");

}catch(e) {try {//IE 浏览器

xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

}catch(e) {

}

}

}

}return xmlHttpReq;

3.接着在相同页面下开始写onload事件(get方法发送数据)

window.onload = function(){var btnDom=document.getElementById("btn");

btnDom.οnclick= function(){//ajax步骤

//1

var xhr =getXMLHttpRequest();//2.监听响应 如何判断能够正确请求和响应

xhr.onreadystatechange = function(){if(xhr.readyState == 4){ //响应结束

if(xhr.status == 200){ //正确响应

//接收响应数据

var data =xhr.responseText;

alert(data);

}

}

};//3.打开连接

/** method: get 或 post

* url: 请求路径

* async: true(表示异步，默认) false*/xhr.open("get","../ajaxGetServlet?age=18&userName=jack",true);//4.发送数据

xhr.send(null); //使用get请求send发送的数据都为null,且不能省略这一步

};

};

或者使用(post请求//第3第4步骤有区别)

window.onload = function(){var btnDom=document.getElementById("btn");

btnDom.οnclick= function(){//1

var xhr =getXMLHttpRequest();//2.

xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){var data =xhr.responseText;

alert(data);

}

}

};//3.

xhr.open("post","../ajaxPostServlet",true);/** 4.发送数据

* send() string或null

* String类型一般为键值对 "username=zhangsan"

* get请求 都是send(null)

* post请求要send数据需要设置请求头*/xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send("user=admin&age=12");

};

};

其中步骤3的url需要我们创建一个servlet

public class AjaxGetServlet extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

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

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

System.out.println(age+"------"+userName);//响应数据

response.getWriter().print("hello"); //js中步骤2监听响应

}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

doGet(request, response);

}

}

代码写完以后,我们只需要按一下(value="ajax")测试按钮就可以使用ajax技术实现异步请求与响应。

二、使用jQuery实现Ajax技术

案例:如何使用ajax技术实现用户注册时用户名是否被占用?

1.jsp注册页面

jquery 实现 ajax

用户名：

2.js页面(无需手动获取XmlHttpRequest对象)

$(function(){

$("#userName").blur(function(){var name = $(this).val();if(name.trim() == ""){return;

}//jquery 实现 ajax

$.ajax({

url:"../jqueryUserName", //请求的路径

type:"post", //请求方式 默认是get

data: { //要发送的数据

"name":name

},

dataType:"text", //响应数据的类型

success:function(result){ //正确响应

if(result == "yes"){

$("#msg").html("用户名可以使用");

}else{

$("#msg").html("用户名被占用");

}

},

error:function(){

alert("请求失败！");

}

});

});

});

3.servlet页面(获取用户名比较是否被占用)

public class JqueryUserName extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

System.out.println("jquery ajax 验证用户名！");

PrintWriter out=response.getWriter();

String name= request.getParameter("name");if("ajax".equals(name) || "admin".equals(name) || "jack".equals(name)){//用户名已被使用

out.print("no");

}else{

out.print("yes");

}

}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

doGet(request, response);

}

}