7.jquery-ajax的使用

一.What

 

Ajax=Asynchronous Javascript And XML 异步的JavaScript和XML

 

不是一门新技术,多种技术的综合

 

二.Why

局部刷新

 

前后两次请求都请求同一个页面,两次请求的页面显示的数据只有少量差别的时候使用

Ajax,典型应用用户注册、级联显示下拉菜单

 

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。傻傻的等待

参见

 

三.How

1.使用$.get()或$.post()提交

$.post("url",参数,function (data, textStatus){

//回调函数,服务器响应完毕以后执行

},"json");

 

$.get("url",参数,function (data, textStatus){

//回调函数,服务器响应完毕以后执行

},"json");

 

 

参数1: 请求的url

参数2: 给服务器传输的参数json对象,格式如下

{

“参数名1”:参数值1,

    “参数名2”:参数值2

}

参数3: 回调函数,服务器响应完毕以后执行

data服务器传回的数据

textStatus 响应的状态码

 

 

参数4: 提示客户端服务器返回的数据的类型 如果是json客户端使用json对象解析

如果是text 客户端把它当成字符串解析

 

 

级联菜单应用:根据选中的一级种类动态产生二级种类

 

演示代码如下:

 

$(function(){

//给category1下拉列表框绑定 onchange 事件

//当内容改变时 发出ajax请求  去查询对应的 二级商品种类

$("#category1").change(function(){

var category1Select  = $("#category1")[0];

var selectIdx = category1Select.selectedIndex;

var categoryCid = category1Select.options[selectIdx].value;

$.post("ProductServlet?action=getCategory2OfCategory1",{

"categoryCid":categoryCid

},function (data, textStatus){

//创建一个新的select 替换掉以前那个二级商品种类的下拉列表框

var select = "<select id='cid' name='cid'>";

for(var i=0;i<data.length;i++){

select = select + "<option value='" + data[i].cid+ "'>" + data[i].cname + "</option>";

}

select = select + "</select>";

//替换

$("#cid").replaceWith(select);

},"json");

});

});

 

 

或

 

$(function(){

//给category1下拉列表框绑定 onchange 事件

//当内容改变时 发出ajax请求  去查询对应的 二级商品种类

$("#category1").change(function(){

var category1Select  = $("#category1")[0];

var selectIdx = category1Select.selectedIndex;

var categoryCid = category1Select.options[selectIdx].value;

$.post("ProductServlet?action=getCategory2OfCategory1",{

"categoryCid":categoryCid

},function (data, textStatus){

alert(data);

var str = "var data =" + data;

eval(str);

//创建一个新的select 替换掉以前那个二级商品种类的下拉列表框

var select = "<select id='cid' name='cid'>";

for(var i=0;i<data.length;i++){

select = select + "<option value='" + data[i].cid+ "'>" + data[i].cname + "</option>";

}

select = select + "</select>";

//替换

$("#cid").replaceWith(select);

},"text");

});

});

 

2.使用$.ajax()提交

$.ajax({

   type: "POST",

  url: "MyServlet",

data:{'param1':$("#param1").val(),'param2':$("#param2").val()},//用json对象保存提交的数据

  dateType: "html",//服务器输出的数据的类型,默认html

   success:function(returnedData){

   $("#result").val(returnedData);

   }

  });

 

 

其他函数: $.load()、$.getScript()、$.getJSON()不常用,有兴趣的同学可以参见《锋利的jQuery第2版》第6章

 

 

3. load()方法演示

 

附录: 原生JavaScript 发送异步请求

 

用户注册 演示代码如下:

 

1.index.js

 

 

var xhr = null;

 

//第二个重要的函数: 回调函数  作用:更新页面

function callback(){

//这个函数执行了三次 状态位一改变就执行一次 XHR对象的 readyState属性改变了三次

//readyState 5个值   0-4      0 表示xhr对象刚刚被创建  1 请求发送中  2.响应  3 解析中   

//4.客户端对xhr解析完成 响应真正完成 客户端才能从这个对象里取出服务器响应的数据

//  3次改变  1->2   2->3  3->4

if(xhr.readyState==4){

//status状态码   404 页面未找到  500 服务器内部错误  200 正常

if(xhr.status==200){

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

msg.innerHTML = xhr.responseText;

}

}

}

 

function createXHR(){

var xhr = null;

if(window.ActiveXObject){

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

}else if(document.addEventListener){

xhr = new XMLHttpRequest();

}

return xhr;

}

 

 

//第一个重要的函数:发送Ajax请求的事件处理函数   共四步

function checkUserIfExist(){

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

//1.创建XMLHttpRequest类的对象

xhr = createXHR();

//2.调用该对象的open方法

// 有三个参数  1.  请求类型  GET POST  2.请求的URL     3. boolean  true 表示异步请求  false 同步的

xhr.open("POST","RegistServlet",true);

 

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

//3.绑定回调函数

xhr.onreadystatechange = callback;

//4.发送请求

xhr.send("username=" + username);

}

 

window.onload = function(){

//给btn1绑定一个事件

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

btn1.onclick = checkUserIfExist;

}

 

 

 

2.RegistServlet.java

 

package com.servlet;

 

import java.io.*;

 

import javax.servlet.*;

import javax.servlet.http.*;

 

public class RegistServlet extends HttpServlet{

 

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String msg = "";

request.setCharacterEncoding("utf-8");

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

PrintWriter out = response.getWriter();

//1.填充数据

System.out.println("123");

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

System.out.println(username);

//2.调用业务逻辑

//去数据库查询 看看用户是否存在

if("zzy".equals(username)){

//数据库 存在了  用户注册失败 显示"用户名已存在,请更换用户名"

msg = "<font color='red'>用户名已存在,请更换用户名</font>";

}else{

msg = "用户名可以使用";

}

//3.输出数据

out.println(msg);

out.flush();

out.close();

}

@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

this.doGet(request, response);

}

}

 

 

3.index.jsp

 

<%@ page language="java"  pageEncoding="UTF-8"%>

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Ajax注册</title>

    <script type="text/javascript" src="js/index.js"></script>

  </head>

  

  <body>

   <h1>Ajax注册</h1>

   

   <form action="" method="post">

   请输入用户名3:<input type="text" id="username" name="username"/>

   <input type="button" id="btn1" value="检查用户名是否存在"/>

   <span id="msg"></span>

   <br/>

   用户密码:<input type="password" name="psd"/><br/>

  确认密码:<input type="password" name="repsd"/><br/>

  用户年龄:<input type="text" name="age"/><br/>

  

  <input type="submit" value="传统的JavaEE注册"/><br/>

  

  </form>

  </body>

</html>