AJAX学习笔记

关于全局刷新和局部刷新

全局刷新:整个浏览器被新的数据覆盖,在网络中传输大量数据。
局部刷新:在浏览器内部发起请求,获取数据,改变页面中的部分内容,网络中数据量传输少。

AJAX是用来做局部刷新的。
局部刷新使用的核心对象是:异步对象(XMLHttpRequest)
这个异步对象是存在浏览器内存中,使用javascript语法创建和使用XMLHttpRequest对象。

AJAX是什么

ajax是一种做局部刷新的方法,不是一种语言
dom,css,xml等等。核心是JS和XML
javascript:负责创建异步对象,发送请求,更新页面的dom对象,ajax请求需要服务器端的数据
xml:网络中传输的数据格式(现在使用了JSON替换了XML)

AJAX使用XMLHttpRequest对象

四步:
创建异步对象-->给异步对象绑定事件-->初始化请求参数-->使用异步对象发送请求
1.创建异步对象:
var xmlHttp = new XMLHttpRequest();
2.给异步对象绑定事件(onreadystatechange):
当异步对象发起请求,获取数据,都会触发该事件。
这个事件需要指定一个函数,在函数中处理状态的变化。
例如:
xmlHttp.onreadystatechange = function(){}

异步对象readyState属性:
readyState 表示异步对象请求的状态变化
0:创建异步对象时:new XMLHttpRequest();
1:初始化异步请求对象:xmlHttp.open();
2:发送请求:xmlHttp.send();
3:从服务器端获取了数据:3是异步对象内部使用
4:异步对象把接收的数据处理完成后,开发人员可以在此时处理数据

异步对象status属性
status 表示网络请求的状况
200:网络请求成功

3.初始异步请求对象
异步的方法open()
xmlHttp.open(请求方式get/post,“服务器端的访问地址”,同步/异步请求(默认是true,异步))
例如:
xmlHttp.open(“get”,“loginServlet?name=zhangsan”,true);

4.使用异步对象发送请求
xmlHttp.send();

获取服务器端返回的数据
使用异步对象的属性:responseText
例如:
xmlHttp.responseText

举例(单个数据传输):

<script type="text/javascript">
function search() {
  //发起ajax请求,传递参数给服务器,服务器返回数据
  //1.创建异步对象
  var xmlHttp = new XMLHttpRequest();
  //2.绑定事件
  xmlHttp.onreadystatechange = function () {
  	//如果能到第四步发送,并且返回的状态码是200
    if(xmlHttp.readyState==4&&xmlHttp.status==200){
      var name=xmlHttp.responseText;//接收Servlet传输过来的数据
      document.getElementById("proname").value=name;
    }
  }
  //3.初始化异步对象
  var proid=document.getElementById("proid").value;
  //get请求方式,传参数,异步
  xmlHttp.open("get","queryProvince?proid="+proid,true);
  //4.发送请求
  xmlHttp.send();
}
script>

<body>
<p>ajax根据省份id获取名称p>
<table>
  <tr>
    <td>省份编号:td>
    <td><input type="text" id="proid">
        <input type="button" value="搜索" onclick="search()">
    td>
  tr>
  <tr>
    <td>省份名称:td>
    <td><input type="text" id="proname" readonly>td>
  tr>
table>
<form action="find">
  <input type="submit" value="查询省份" >
form>
body>

Servlet:doGet方法

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String proid=request.getParameter("proid");
    ProvinceDao dao=new ProvinceDao();
    String name="默认没有数据";
    //访问dao
    if(proid!=null&&!"".equals(proid.trim())){
        name=dao.queryProvinceNameById(Integer.valueOf(proid));
    }
    //使用HttpServletResponse输出数据
    response.setContentType("text/html;charset=utf-8");
    PrintWriter pw=response.getWriter();
    pw.print(name);//把name传给AJAX中的异步对象
    pw.flush();
    pw.close();

}

返回一个JSON格式的字符串

  1. JSON分类:
    json对象(JSONObject)格式: 名称:值
    json数组(JSONArray)格式: [{JSON对象},{JSON对象},……]

  2. 为什么使用JSON?(优点)
    JSON格式好理解
    JSON格式数据在多种语言中,比较容易处理
    JSON格式数据占用的空间小,在网络中传输快

  3. 处理JSON的工具库:
    gson(Google)、fastjson(阿里)、jackson

在JS中,可以把JSON格式的字符串,转为JSON对象

代码实例:

<head>
<title>使用JSON格式的数据title>
<script type="text/javascript">
function doSearch() {
    //1.创建异步对象
    var xmlHttp=new XMLHttpRequest();

    //2.绑定事件
    xmlHttp.onreadystatechange=function () {
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            var data=xmlHttp.responseText;//接收了这个json格式的字符串
            //eval方法把JSON格式的字符串转换为JSON对象
            var jsonObject=eval("("+data+")");
            //更新dom对象
            document.getElementById("proname").value=jsonObject.province;
            document.getElementById("projiancheng").value=jsonObject.jiancheng;
            document.getElementById("shenghui").value=jsonObject.city;
        }
    }

    //3.初始化异步对象
    var proid=document.getElementById("proid").value;
    xmlHttp.open("get","queryjson?proid="+proid,true)

    //4.发送请求
    xmlHttp.send();
}
script>
head>
<body>
<p>ajax请求使用json格式的数据p>
<table>
    <tr>
        <td>省份编号td>
        <td><input type="text" id="proid">
        <input type="button" value="搜索" onclick="doSearch()">
        td>
    tr>
    <tr>
        <td>省份名称td>
        <td><input type="text" id="proname">td>
    tr>
    <tr>
        <td>省份简称td>
        <td><input type="text" id="projiancheng">td>
    tr>
    <tr>
        <td>省会名称td>
        <td><input type="text" id="shenghui">td>
    tr>
table>
body>

Servlet:doGet方法

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

    //默认值,{}表示json格式的数据,空的json
    String json="{}";

    //1.获取请求参数省份ID
    String proId=request.getParameter("proid");

    //判断proid
    if(proId!=null&&proId.trim().length()>0){
        ProvinceDao dao=new ProvinceDao();
        Province pro=dao.queryProvinceById(Integer.valueOf(proId));
        //使用jackson把Province对象转为JSON格式的字符串
        ObjectMapper om =new ObjectMapper();
        json=om.writeValueAsString(pro);
    }

    //把获取的数据,通过网络传给AJAX中的异步对象
    //指定服务器返回给浏览器的是JSON格式的数据
    response.setContentType("application/json;charset=utf-8");
    PrintWriter pw=response.getWriter();
    pw.println(json);//将这个json格式的字符串传给AJAX

    pw.flush();
    pw.close();
}

你可能感兴趣的:(AJAX学习笔记)