（接上一章节）

　　4.2　　使用ajax交互方式

• 使用ajax的转换思想    

      A：异步请求在页面中发起，也要在页面中接收数据并展现。

  B：ajax中的数据不能从作用域中获取，只能从responseText或者responseXML中获取。

• 步骤：

  • 　　1. 向服务器发送请求： XMLHttpRequest 对象用于和服务器交换数据，使用 XMLHttpRequest 对象的 open() 和 send() 方法：

    • 　　open(method,url,async)方法，规定请求的类型、URL 以及是否异步处理请求。
    • 　　send(string) ：将请求发送到服务器。（string：仅用于 POST 请求）

示例：

　　1.1　　一个简单的 GET 请求：

xmlhttp.open("GET","ajaxAction!one",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","ajaxAction!one?data=" + new Date(),true);
xmlhttp.send();

　　1.2　　一个简单 POST 请求：

xmlhttp.open("POST","ajaxAction!two",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajaxAction!two",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=用户名&password=123");

　　1.3　　GET 还是 POST？

• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST 没有数据量限制）

• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

• * 　　2. 服务器响应:如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

  　　　　　　　　　　　　　　　　responseText 获得字符串形式的响应数据。　　　　　　　　　　　

  　　　　　　　　　　　　　　　　responseXML 获得 XML 形式的响应数据。

  　　　　　　注意：客户端如果是以responseText获取服务器端的响应，那么在服务器端返回的数据就只能是String的。 同理可证responseXML。

• * 　　3.onreadystatechange 事件

  当请求被发送到服务器时，我们需要执行一些基于响应的任务。
  
  每当 readyState 改变时，就会触发 onreadystatechange 事件。
  
  readyState 属性存有 XMLHttpRequest 的状态信息。
  
  下面是 XMLHttpRequest 对象的三个重要的属性：
  
  　　　　![](https://article.cdnof.com/2307/b56f5224-7fe1-4825-989a-735a527eeb83.png)

　　4.2.1　　第一次使用ajax异步请求

• 使用ajax异步请求检验用户名是否存在
• 　　1. 设计数据库：

• 2. 编写index.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<%String path=request.getContextPath(); %>

<div >  
    用户名:<input type="text" name="username" id="username"  onblur="check\_username()" /><br/>  
</div>  
<div id="username\_div" ></div>

密&nbsp;码:<input type="password" name="password" /><br/>  

• struts.xml

<constant name="struts.enable.DynamicMethodInvocation" value="true" />  
<constant name="struts.devMode" value="true" />

<package name="default" namespace="/" extends="struts-default">  
<action name="ajaxAction" class="action.AjaxAction"></action>

</package>  

• AjaxAction。java

package action;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.Statement;
import java.util.Map;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.ResultSetHandler;
import org.apache.commons.dbutils.handlers.MapHandler;

import DBUtil.DBUtil;
import actionUtil.BaseAction;

public class AjaxAction extends BaseAction {
public String execute() {

    return null;  
}

public String ajax\_send\_text() {  

/**
* 本方法接受jsp页面传来的用户名，并与数据库中的用户名相对比，如果数据库中存在这个用户名则返回字符串“true”，
* 否则返回字符串“false”
*/
try {
PrintWriter out = response.getWriter();
String userName = request.getParameter("username");

        Connection conn=null;  
        try{  
            conn=DBUtil.getConn();  
            String sql="select \* from user where userName='"+userName+"'";  
            QueryRunner runner=new QueryRunner();  
            Map<String, Object> map=runner.query(conn, sql,new MapHandler());

            if(map!=null){  
                out.print("false");  
            }else{  
                out.print("true");  
            }  
        }catch(Exception e){  
            e.printStackTrace();  
        }

    } catch (IOException e) {

        e.printStackTrace();  
    }  
    return null;    //返回值必须得是NULL,因为上述已经通过out对象返回数据流，这里如果设置了返回值那么responseText接收到的数据就是return返回的页面。

}  

}

结果：

• 解析：  当用户输入用户名之后把焦点从用户名输入框移动到别的地方去的时候就会触发check_username()函数，这个函数的XmlHttpRequest对象调用open（）方法发送请求到服务器端（Action），然后通过responseText/responseXML获取响应的数据，完成操作。

---

• 上述例子是XmlHttpRequest发送get请求，以下例子是XmlHttpRequest发送post请求。
• index.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<%String path=request.getContextPath(); %>

<button onclick="send\_post()">发送post请求</button><br/>  
<select id="select" name="select" style="width:200px;">

</select>  

• struts.xml

<constant name="struts.enable.DynamicMethodInvocation" value="true" />  
<constant name="struts.devMode" value="true" />

<package name="default" namespace="/" extends="struts-default">  
<action name="ajaxAction" class="action.AjaxAction">  
    <result name="true22">/true22.jsp</result>  
</action>

</package>  

• AjaxAction .java

package action;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.Statement;
import java.util.Map;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.ResultSetHandler;
import org.apache.commons.dbutils.handlers.MapHandler;

import DBUtil.DBUtil;
import actionUtil.BaseAction;

public class AjaxAction extends BaseAction {
public String execute() {

    return null;  
}

public String achieve() {  
     String username=request.getParameter("username");  
     String passWord=request.getParameter("password");  
    String sex=request.getParameter("sex");

    System.out.println(username);  
    System.out.println(passWord);  
    System.out.println(sex);

    PrintWriter out=null;  
    try {  
        out = response.getWriter();  
        String str = "1:下拉框1,2:下拉框2,3:下拉框3";  
        out.print(str);  
        out.flush();  
        out.close();

    } catch (IOException e) {  
        e.printStackTrace();  
    }

    return null;  
}  

}

结果：

---

• JSON与ajax的初步结合。

  • 　　index.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<%String path=request.getContextPath(); %>

点我以ajax异步的方式发送接受json格式字符串并展示

• * 　　　　struts.xml

<constant name="struts.enable.DynamicMethodInvocation" value="true" />  
<constant name="struts.devMode" value="true" />

<package name="default" namespace="/" extends="struts-default">  
<action name="ajaxAction" class="action.AjaxAction">  
    <result name="true22">/true22.jsp</result>  
</action>

</package>  

• * 　　AjaxAction.java

package action;

import java.io.PrintWriter;
import java.sql.Connection;

import java.util.List;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.google.gson.Gson;

import DBUtil.DBUtil;
import UserBean.UserBean;
import actionUtil.BaseAction;

public class AjaxAction extends BaseAction {
public String execute() {

    return null;  
}

public String ajax\_json\_get() {

    /\*\*  
     \* 本方法用于从数据库从取出全部对象，并转为json格式的字符串返回给客户端  
     \*/  
    QueryRunner runner=new QueryRunner();  
    Connection conn=DBUtil.getConn();  
    String sql="select \* from user";

    try {  
        List<UserBean> userlist=runner.query(conn, sql, new BeanListHandler<UserBean>(UserBean.class));  
        Gson gson=new Gson();  
        String userList=gson.toJson(userlist);

        PrintWriter out=response.getWriter();  
        out.print(userList);  
        out.flush();  
        out.close();

    } catch (Exception e) {

        e.printStackTrace();  
    }

    return null;  
}  

}

---

• 使用JQuery进行JSON与ajax的结合。

• index.jsp（要先引入jquery.js）

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<%String path=request.getContextPath(); %>

• strutt2.xml

<constant name="struts.enable.DynamicMethodInvocation" value="true" />  
<constant name="struts.devMode" value="true" />

<package name="default" namespace="/" extends="struts-default">  
<action name="ajaxAction" class="action.AjaxAction">  
    <result name="true22">/true22.jsp</result>  
</action>

</package>  

package action;

import com.google.gson.Gson;

import actionUtil.BaseAction;

public class AjaxAction extends BaseAction {
public String execute() {

    return null;  
}

public String json\_get(){

    String userName=request.getParameter("userName");  
    String age=request.getParameter("age");  
    String sex=request.getParameter("sex");  
    System.out.println(age);  
    System.out.println(sex);  
    System.out.println(userName);  
    return null;  
}  

}

结果：

• 解析：

  　　1.　　JQuery.get() 方法通过远程 HTTP GET 请求载入信息。

  　　语法：

$(selector).get(url,data,success(response,status,xhr),dataType)

　　2.　　jQuery.param(obj, [traditional])  （返回值为String类型）

　　　　　　key/value方式是标准的地址栏传数据方式（即&username=张三&age=15）而json的数据格式是({username:"张三",age:15}) jQuery.get方法要求传递数据必须是key/value的数据，而如果是JSON.stringify（）得到的字符串是以冒号隔开的。

---