目录

Ajax

ajax实现步骤

ajax实现Get请求方式

ajax实现Post请求方式

JQuery

dom对象和jquery对象

选择器

表单选择器

过滤器

表单属性过滤器

each语法

jquery中给dom对象绑定事件

使用jquery的函数，实现ajax请求的处理

Ajax

1、全局刷新和局部刷新
         全局刷新： 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载，渲染页面。
         局部刷新： 在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。其余的页面无需加载和渲染。 网络中数据传输量少， 给用户的感受好。

         ajax是用来做局部刷新的。局部刷新使用的核心对象是 异步对象（XMLHttpRequest），这个异步对象是存在浏览器内存中的 ，使用javascript语法创建和使用XMLHttpRequest对象。

2、ajax：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
        Asynchronous：异步的意思
        JavaScript：javascript脚本，在浏览器中执行
        and ：和
        xml ：是一种数据格式 

        ajax是一种做局部刷新的新方法（2003左右），不是一种语言。ajax包含的技术主要有javascript,dom,css, xml等等。 核心是javascript 和 xml 。
         javascript：负责创建异步对象，发送请求，更新页面的dom对象。ajax请求需要服务器端的数据。
         xml： 网络中的传输的数据格式。 使用 json 替换了xml 。

ajax实现步骤

 1）创建异步对象

var xmlHttp = new XMLHttpRequest();

 2）给异步对象绑定事件。

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

    xmlHttp.onreadystatechange = function () {// 处理服务器端返回的数据，更新当前页面if (xmlHttp.readyState == 4 && xmlHttp.status == 200){var data = xmlHttp.responseText;//更新dom对象，更新页面数据document.getElementById("mydata").innerText = data;}}

解析： 异步对象的属性 readyState 表示异步对象请求的状态变化
     0：创建异步对象时， new XMLHttpRequest();
     1：初始异步请求对象， xmlHttp.open()
     2：发送请求， xmlHttp.send()
     3：从服务器端获取了数据，此时3， 注意3是异步对象内部使用， 获取了原始的数据。
     4：异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。
在4的时候，开发人员做什么 ？  更新当前页面。

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

    异步对象的status属性，表示网络请求的状况的，  200， 404， 500， 需要是当status==200时，表示网络请求是成功的。

  3) 初始异步请求对象
     异步的方法open().

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

xmlHttp.open("get", "${pageContext.request.contextPath}/logAjax?"+param, true);

解析：

open(method, url, async, username, password)

        method： 请求方法（GET/POST/PUT/DELETE....）

        url： 统一资源定位符

        async： 指定支持异步还是同步机制（true表示支持异步，false表示支持同步）

【注意】解决get请求中的缓存问题，请求地址加入“时间戳”

  4)使用异步对象发送请求

     xmlHttp.send()

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

  回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。

附加图示

 4.json使用

使用JSON格式输出，需要导入依赖。

  json分类：

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

String json = "{}";
 // 需要使用json 把 java对象转换为 json
 ObjectMapper om = new ObjectMapper();
 json = om.writeValueAsString(java对象);

// 指定服务器端（Servlet）返回给浏览器的是json格式的数据
 response.setContentType("application/json;charset=utf-8");

  为什么要使用json ：
        1. json格式好理解
        2. json格式数据在多种语言中，比较容易处理。 使用java， javascript读写json格式的数据比较容易。
        3. json格式数据他占用的空间下，在网络中传输快， 用户的体验好。

  处理json的工具库： gson（google）； fastjson（阿里），jackson， json-lib

  在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名。

ajax实现Get请求方式

创建Servlet，并在webapp/WEB-INF/web.xml注册Servlet

public class LoginAjaxServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String username = request.getParameter("username");String password = request.getParameter("password");String msg = "身份验证失败";if ("admin".equals(username) && "123".equals(password)){msg = "身份验证成功";}// 响应ajax需要的数据。使用HttpServletResponse输出数据response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();out.println(msg);out.close();}
 }

    LoginAjaxServletcom.km.controller.LoginAjaxServletLoginAjaxServlet/logAjax

JSP显示页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
 
 
 
 
局部刷新ajax-验证信息
账号：
密码：



加载。。。
 
 

测试符合结果。

【注意】解决get请求中的缓存问题，请求地址加入“时间戳”

ajax实现Post请求方式

Servlet和上面的案例一样，只是方法变成doPost()

JSP显示页面，只有ajax部分不同，只更改ajax

JQuery

1、jQuery是js库，库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的用js代码写的function。

        使用JQuery，需要导入JQuery库。点击链接官网自行下载。

dom对象和jquery对象

   dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
        var obj=  document.getElementById("txt1");  obj是dom对象，也叫做js对象。

   jquery对象： 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
        例如  var jobj =  $("#txt1") , jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。现在数组中就一个值。

dom对象可以和jquery对象相互的转换。
     dom对象可以转为jquery ， 语法： $(dom对象)
     jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).

为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。
     当你的dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。

选择器

        就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom。
   常用的选择器：
    1） id选择器， 语法： $("#dom对象的id值")
        通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。

    2） class选择器， 语法： $(".class样式名)
        class表示css中的样式， 使用样式的名称定位dom对象的。

    3） 标签选择器， 语法： $("标签名称")
        使用标签名称定位dom对象的

表单选择器

使用标签的type属性值，定位dom对象的方式。语法： $(":type属性值")

    例如： $(":text") ,选择的是所有的单行文本框，
               $(":button") ,选择的是所有的按钮。

过滤器

在定位了dom对象后，根据一些条件筛选dom对象。过滤器有是一个字符串，用来筛选dom对象的。过滤器不能单独使用， 必须和选择器一起使用。

  1）$("选择器:first") ：第一个dom对象

  2）$("选择器:last") ：数组中的最后一个dom对象

  3）$("选择器:eq(数组的下标)") ：获取指定下标的dom对象

  4）$("选择器:lt(下标)") ： 获取小于下标的所有dom对象

  5）$("选择器:gt(下标)") ： 获取大于下标的所有dom对象

表单属性过滤器

根据表单中dom对象的状态情况，定位dom对象的。
        启用状态， enabled , 
        不可用状态  disabled
        选择状态 ， checked ， 例如radio， checkbox 

each语法

1). 可以对 数组， json ，dom数组循环处理。 数组， json中的每个成员都会调用一次处理函数。
        var arr = { 1, 2, 3} //数组
        var json = {"name":"lisi","age":20 } 
        var obj = $(":text");

     语法： $.each( 循环的内容， 处理函数 ) ：表示使用jquery的each，循环数组，每个数组成员，都会执行后面的“处理函数”一次。

        $：相当于是java的一个类名
        each：就是类中的静态方法。
        静态方法调用，可以使用  类名.方法名称 

处理函数:function(index, emelent) :
         index, element都是自定义的形参， 名称自定义。
          index：循环的索引
          element：数组中的成员

     js循环数组：

      for(var i=0;i

        $("#btn").click(funtion(){alert("btn按钮单击了")})

$.ajax({async:true , contentType:"application/json", data: {name:"lisi",age:20 },dataType:"json",url:"bmiAjax",type:"get",error:function(){//请求出现错误时，执行的函数},success:function( data ) {// data 就是responseText, 是jquery处理后的数据。}
 })

$(function () {// $(function())在页面的dom的对象加载成功后执行的函数，此时发起ajax$.ajax({url:"${pageContext.request.contextPath}/logAjax",date:{"username":"zhangsan","password":"123"},type:"get",dataType:"json",success:function (resp) {alert(resp);}
 })