AJAX笔记

AJAX

异步的javaScript和XML

全程：Asynchronous Javascript And xml

可以做到前后端分离

AJAX的作用

1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并且获取服务端响应的数据

   使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面

2. 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术

   如：搜索时的联想功能，用户名实时校验是否可用

AJAX的快速入门

编写AjaxServlet

编写ajax的html网页

1. 创建核心对象

   var xhttp;
       if (window.XMLHttpRequest){
           xhttp=new XMLHttpRequest();
       }else {
           //code for IE6,IE5
           xhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

2. 发送请求

   xhttp.open("GET","URL");
       xhttp.send();

3. 获取相应

   xhttp.onreadystatechange=function () {
           if (this.readyState==4&&this.status== 200){
               alert(this.responseText);
           }
       }

全局刷新和局部刷新

全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面

局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容，其余的页面无需加载和渲染，网络中数据传输量少，给用户的体验好

ajax就是用来做局部刷新的

局部刷新使用的核心对象是异步对象，使用javascript语法创建和使用XMLHttpRequest对象

AJAX异步对象的使用

1. 创建异步对象

   var xmlHttp =new XMLHttpRequest();

2. 给异步对象绑定事件

   button.onclick =fun1(){};
   function fun1(){
       alert("按钮被点击了");
   }
   
   //该方法是xmlhttp获取数据时候都会启动的方法
   xmlHttp.onreadystatechange =function(){
       //处理状态的变化
   }

onreadystatechange事件

当异步对象发起请求，获取了数据都会触发这个事件，这个事件需要指定一个函数，在函数中处理状态的变化

每当状态发生改变的时候都会调用一次这个函数

xmlHttp.onreadystatechange =function(){
    //处理状态的变化
}

readyState属性

存储XMLHttpRequest的状态，从0到4变化

0：创建异步对象时，new XMLHttpRequest();

1：初始异步请求对象，xmlHttp.open();

2：发送请求，xmlHttp.send();

3：从服务器端获取了数据，此时为3，3是异步对象的内部使用，表示获取了原始的数据

4：异步对象把接收的数据处理完成后，此时开发人员在4的时候处理数据，在4的时候，更新当前页面，局部刷新数据，更新当前页面

if(xmlHttp.readyState == 4 && xmlHttp。status == 200){
    //可以处理服务器端的数据，更新页面
}

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

初始异步请求对象

异步的方法open();

xmlHttp.open(请求方式get|post,"服务器端的访问地址"，同步(false)|异步(true));

//例如
xmlHttp.open("get","loginServlet?name=zs",true);
//异步默认为true可以省略

使用异步对象发送请求

xmlHttp.send()

获取服务器端返回的数据，使用异步对象的属性：responseText

使用例子：xmlHttp.responseText

全局刷新计算BMI（案例）

使用servlet和转发完成

局部刷新计算BMI（案例）

1. 新建JSP，使用XMLHttpRequest异步对象
   • 创建
   • 绑定事件
   • 初始请求
   • 发送请求
2. 创建服务器的servlet，接受并处理数据，把数据输出给异步对象

js代码

<script type="text/javascript">
        function doAjax() {
            //创建异步对象
            var xmlHttp=new XMLHttpRequest();
            //绑定事件
            xmlHttp.onreadystatechange = function () {
                //处理服务器返回的数据，更新当前页面
                if (this.readyState==4&&this.status== 200){
                    document.getElementById("word").innerText=this.responseText;
                }
            };
            var name=document.getElementById("name").value;
            var w=document.getElementById("w").value;
            var h=document.getElementById("h").value;
            //初始请求数据
            xmlHttp.open("get","http://localhost:8080//ajax/bmiAjax?name="+name+"&&w="+w+"&&h="+h);
            //发送请求
            xmlHttp.send();
        }
    </script>

html代码

    姓名：<input type="text" name="name" id="name"><br>
    体重：<input type="text" name="w" id="w"><br>
    身高：<input type="text" name="h" id="h"><br>
    <input type="button" value="提交" onclick="doAjax()">
<div id="word">等待数据加载</div>

java代码

package com.xgfm.ajax;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/bmiAjax")
public class BmiAjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String w=request.getParameter("w");
        String h=request.getParameter("h");
        String name=request.getParameter("name");

            double weight=Double.valueOf(w);
            double high=Double.valueOf(h);

            double bmi=weight/(high*high);
            String msg;
            if (bmi<=18.5){
                msg="你他妈的是不是细狗啊";
            }else if (bmi>18.5&&bmi<=23.9){
                msg="你他妈的好像有点正常诶";
            }else if (bmi>24 && bmi <=27){
                msg="你他妈的一天天吃多少东西啊";
            }else {
                msg="不是，哥们一天天的光顾着吃了是吧";
            }

            System.out.println(msg);
            msg="您好，您的bmi为"+bmi+"这边的想法是"+msg;
            request.setAttribute("msg",msg);
            response.setContentType("text/html;charset=utf-8");
        PrintWriter pw=response.getWriter();
        pw.println(msg);
        pw.close();
    }
    }

根据省份id查询省份信息（案例）

视频中是使用jdbc+jsp实现的，我想用mybatis实现以下

Json

使用ajax发送请求—-servlet返回一个json数据格式的字符串

json分类：

1. json对象，JSONObject，这种对象的格式，名称：值，可以看做是key:value 格式
2. json数组，JSONArray，基本格式[{name:”河北”,jiancheng:”冀”,shenghui:”石家庄”}name:”陕西”,jiancheng:”晋”,shenghui:”不知道”}]

为什么要使用json？

• json格式好理解
• json格式数据在多种语言中，比较容易处理
• json格式数据在他占用的空间下，在网络中传输快，用户体验好

json如何使用

处理json的工具库：

• gson(google)
• fastjson(速度快，不是最符合json处理规范)
• jackson（性能好，规范好）
• json-lib(性能差，依赖多)

我们使用的是jackson

maven的坐标

<dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.4.2</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.4.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.4.2</version>
        </dependency>
        <!--以上【三个jar包紧密依赖】同时存在。-->
 
        <dependency>
            <groupId>com.fasterxml.jackson</groupId>
            <artifactId>jackson-parent</artifactId>
            <version>2.8</version>
            <type>pom</type>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>1.9.13</version>
        </dependency>

使用案例

Province p=new Province();
p.setId();
p.setName();
...存入数据
    
//使用jackson把p转为json
ObjectMapper om=new ObjectMapper();
//writeValueAsString :把参数的java对象转为json格式的字符串
String json=om.writeValueAsString(p);
System.out.println("转换的json=="+json);
//输出结果
//转换的json=={name:"河北",jiancheng:"冀",shenghui:"石家庄"}

Servlet对象

//给一个默认值，一个空的json，确保有json输入
String json="{}"
//获取请求参数，省份的id
String str=request.getParameter("proid");
//判断proid有值时，调用dao查询数据
if(str!=null&& str.trim().length()>0){
    ProvinceDao dao=new ProvinceDao();
    Province p=dao.queryProviceById(Integer.valueOf(Str));
//需要用jackson把Provice对象转为json
    ObjectMapper om=new ObjectMapper();
    json=om.writeValueAsString(p);
    
    //把获取的数据，通过网络传给AJAX的异步对象，响应数据
    response.setContentType("application/json;charset=utf-8");
    PrintWriter pw=response.getWriter();
    pw.println(json);
    //输出数据，赋值给ajax中的responseText
}

html中的js语句

var date=xmlHttp.responseText;
//eval是执行括号中的代码，将json字符串转为json对象
var jsonobj=eval("("+data+")");
//更新dom对象
document.getElementById("proname").value=jsonobj.name;
document.getElementById("projiancheng").value=jsonobj.jiancheng;
document.getElementById("proshenghui").value=jsonobj.shenghui;

在dom对象更新中有点复杂，可以嵌套函数来简化

(xmlHttp.readyState == 4&&xmlHttp.status== 200){
var date=xmlHttp.responseText;
//eval是执行括号中的代码，将json字符串转为json对象
var jsonobj=eval("("+data+")");

callback(json);
}

function callback(json){
document.getElementById("proname").value=jsonobj.name;
document.getElementById("projiancheng").value=jsonobj.jiancheng;
document.getElementById("proshenghui").value=jsonobj.shenghui;
}

同步和异步

在使用

xmlHttp.open(请求方式get|post,"服务器端的访问地址"，同步(false)|异步(true));

使用true是指异步处理请求，使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其他的操作

再

xmlHttp.send();

发送请求

在这之后执行在send之后的代码等等

类似多线程执行代码

同时也可以创建多个异步对象，进行多线程操作

异步不会影响其他代码的执行，相当于可以同时执行其它请求

同步请求是比较浪费资源的，在更新数据时候一般都是使用异步对象的

总结

总的来说还是太过于粗略了，也只是快速入门，做一个了解罢了