jquery的ajax的使用方法和原理,ajax的使用方法和原理（jquery ajax请求的五个步骤）...

内容

jsp表单

name:

password:

用户名或密码错误

解释函数的作用：check()检查用户名或密码是否为空(即是否未输入数据)，checkDB()通过JavaScript原生态Ajax和后端进行校验，用户名和密码是否正确。

JavaScript实现

var Ajax={

get:function (url,fun) {

var obj = new XMLHttpRequest();

obj.open('GET', url, true);

obj.onreadystatechange = function () {

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

fun.call(this, obj.responseText)

}

};

obj.send(null);

},

post : function (url,data,fun) {

var obj = new XMLHttpRequest();

obj.open('POST', url, true);

obj.onreadystatechange = function() {

if(obj.status==200 || obj.readyState==4) {

fun.call(this, obj.responseText)

}

};

obj.send(data);

}

};

function check() {

var name = document.getElementById("name").value;

var pass = document.getElementById("pass").value;

alert(name);

if(name == ""|| name==null || pass==null || pass == ""){

alert("用户名或密码没有输入！");

return false;

}

}

function checkDB(){

var name = document.getElementById("name").value;

var pass = document.getElementById("pass").value;

var data = {"name": name, "pass": pass};

Ajax.post('demo',data,putError);

}

function putError(data) {

if(data=="error"){

document.getElementById("putError").style.visibility = "visible";

return false;

}

}

请求的demo会被MyServlet类拦截。这里var Ajax定义为一个数组，这个数组是一个键值对，键是get post 而值是一个函数，这个函数先一步，对数据进行校验。

Servlet实现

public class MyServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

User user = new User("xiaoming", "666");

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

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

if (user.getName().equals(name) && user.getPass().equals(pass)){

response.getWriter().write("succ");

}

else{

response.getWriter().write("error");