Js的Ajax&Jq的Ajax

发表于 | 分类于 ， ，
Ajax原理以及如何使用，具体案例

Ajax原理

浏览器同步&异步访问

  • 同步: 客户端发送请求道服务器，当服务器返回响应之前，客户端都处于等待卡死状态
  • 异步: 客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

图解

流程

  1. 触发Js事件，获取浏览器内置的Ajax引擎(XMLHttpRequest对象)
  2. 确定请求路径，请求方式，是否为异步请求
  3. 发送请求给服务器
  4. 服务器接收请求，处理请求，发送响应给Ajax引擎
  5. 执行js回调函数，函数运行，将数据显示给浏览器，浏览器进行页面渲染

JavaScriptAjax使用(了解)

使用步骤

  1. 获得ajax引擎对象 
    variable = new XMLHttpRequest();
  2. 设置回调函数 
    variable.onreadystatechange = function fn(){};
  3. 确定请求路径，发送方式，是否同步 
    variable.open("GET","/Servlet",true);
  4. 发送请求 
    variable.send();

整合

function onClickFn() {
    // 1.获得请求对象
    var variable = new XMLHttpRequest();
    // 2.确定请求路径，发送方式，是否同步
    variable.open("GET", "/demo?user=demo", true);
    // 3.设置回调函数
    variable.onreadystatechange = function () {
        if (variable.readyState === 4 && variable.status === 200) {
            var res = variable.responseText;
            alert(res);
        }
    };
    // 4.发送请求
    variable.send();
}

servlet

package com.company.web;

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;

@WebServlet(name = "demo", urlPatterns = "/demo")
public class DemoServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String user = request.getParameter("user");
        response.getWriter().write(user);
    }
}

重点

所有异步访问都是ajax引擎：通过js触发事件，将请求交给ajax引擎，引擎再发送请求给服务器，服务器处理发送响应给ajax引擎，再交给js，在这个过程中无需等待。

Json数据格式(重点)

Json的格式与解析

JSON格式

  • 对象格式：{“key1”:obj,”key2”:obj,”key3”:obj…}
  • 数组/集合格式：[obj,obj,obj…] Json的key是字符串 Json的value是Object

JSON解析

json是js的原生内容，也就意味着js可以直接取出json对象中的数据

Json转换插件

  • jsonlib
  • Gson : Google
  • fastison : 阿里巴巴

步骤

  1. 导包
  2. 将需要对象转换成json类型
    jsonlib： 
    //将集合转换成JSONArray，需要转换成字符串(toString())
JSONArray fromObject = JSONArray.fromObject(ArrayList);
fromObject.toString();

    Gson:

    Gson gson = new Gson();
//param为需要转换成json类型的对象
String json  = gson.toJson(param);

    fastjson:
    fastison下载地址
    API文档

Jquery的Ajax技术(重点)

get请求方式

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

jQuery.get(url, [data], [callback], [type])
//简化版
$.get(url, [data], [callback], [type])
  • 返回值: XMLHttpRequest
  • 参数：
    1. url: 待载入页面的URL地址
    2. data: 待发送 Key/value 参数
    3. callback: 载入成功时回调函数
    4. type: 返回内容格式，xml, html, script, json, text, _default
	<script>
        $(function () {
            $("input").click(function () {
                $.get(
                    "/demo",
                    {"name": "演示", "pwd": "1234564"},
                    function (data) {
                        alert(data.super);
                    },
                    "json"
                )
            });
        })
    </script>

<input type="button" value="请点击" >

public class DemoServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

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

        //        转码
        String name = new String(request.getParameter("name").getBytes("iso8859-1"), "utf-8");

        //        输入JSON返回值
        response.getWriter().write("{\"super\":\"as\"}");
    }
}

post请求方式

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

jQuery.post(url, [data], [callback], [type])
//简化版
$.post(url, [data], [callback], [type])
  • 返回值: XMLHttpRequest
  • 参数：
    1. url: 待载入页面的URL地址
    2. data: 待发送 Key/value 参数
    3. callback: 载入成功时回调函数
    4. type: 返回内容格式，xml, html, script, json, text, _default

post请求默认解决了编码问题，所以不需要人为进行编码处理 get请求获取浏览器数据需要编码再解码

new String(reqeust.getParameter("param").getBytes("iso8859-1"), "utf-8");

响应正常通过设置编码就能解决

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

ajax请求方式

见文档

案例

异步用户名验证

分析

  • 窗口失去焦点事件触发js(focusout)
  • 将input标签里面值传给Ajax引擎，引擎传递给服务器
  • 服务器获取数据，到数据库进行查询
  • 返回用户名是否在数据库存在的状态给Ajax
  • Ajax将数据传递给js，js根据状态运行相应代码，进行局部刷新

代码

js

<script>
    // 1.窗口失去焦点事件触发
    $(function () {
        $("#username").focusout(function () {
            var value = $("#username").val();
            // 2.将数据传递给服务器
            $.get("/confirmUserName",
                {"username": value},
                // 6.处理服务器返回的数据
                function (date) {
                    var span = $("#username_span");
                    if (date.boolean) {
                        // 用户名已存在
                        span.html("用户名已存在");
                        span.css("color", "red");
                    } else {
                        span.html("该用户名可用");
                        span.css("color", "green");
                    }
                },
                "json"
            );
        })
    })
</script>

web

package com.company.web;

import com.alibaba.fastjson.JSON;
import com.company.service.AjaxService;
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.sql.SQLException;

@WebServlet(name = "confirmUserName", urlPatterns = "/confirmUserName")
public class ConfirmUserNameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

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

        //        3.服务器接收数据
        String username = new String(request.getParameter("username").getBytes("iso8859-1"), "utf-8");

        //        4.对数据库进行查询
        boolean b = false;
        try {
            b = new AjaxService().confirmUserName(username);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        //        5.服务器返回处理后的数据
        response.getWriter().write("{\"boolean\":" + b + "}");
    }
}

效果

  • input标签username存在于数据库，返回值为true
  • input标签username存在于数据库，返回值为false

商品搜索

分析

  1. 点击搜索框触发js事件进行弹框，确定事件keyup()
  2. 将input标签里面的数据传递给服务器
  3. 服务器接收数据
  4. 服务器处理数据
  5. 服务器将处理后的数据发送给Ajax引擎
  6. Ajax引擎接收服务器传入的数据，数据交给js进行局部刷新

代码

js

web

package com.company.web;

import com.alibaba.fastjson.JSON;
import com.company.service.AjaxService;

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.sql.SQLException;
import java.util.List;

@WebServlet(name = "search", urlPatterns = "/search")
public class SearchServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

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

        //        3.服务器接收数据
        //        转码
        String data = new String(request.getParameter("searchData").getBytes("iso8859-1"), "utf-8");

        //        4.处理数据
        List<String> pnames = null;
        try {
            pnames = new AjaxService().findSearch(data);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        //        5.发送响应
        response.setContentType("text/html;charset=utf-8");
        String string = JSON.toJSONString(pnames);
        response.getWriter().write(string);
    }
}

效果