素材巴巴 > 程序开发 >

AJAX_ jQuery

程序开发 2023-09-03 10:18:45

目录

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-验证信息

账号:
密码:



加载。。。

测试符合结果。

【注意】解决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

2).循环jquery对象, jquery对象就是dom数组

       jquery对象.each( function(index,element) {  } )

jquery中给dom对象绑定事件

1) $(选择器).事件名称( 事件的处理函数)
      $(选择器):定位dom对象, dom对象可以有多个, 这些dom对象都绑定事件了
       事件名称:就是js中事件去掉on的部分, 例如 js中的单击事件 onclick(), jquery中的事件名称,就是click,都是小写的。
      事件的处理函数:就是一个function ,当事件发生时,执行这个函数的内容。

例如给id是btn的按钮绑定单击事件

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

  2) on 事件绑定

     $(选择器).on( 事件名称 , 事件的处理函数)

      事件名称: 就是js事件中去掉on的部分, 例如js中onclick ,这里就是click
      事件的处理函数: function 定义。

例如,

       $("#btn").on("click", function() { 处理按钮单击 } ) 

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

没有jquery之前,使用XMLHttpRequest做ajax , 有4个步骤。  jquery简化了ajax请求的处理。使用三个函数可以实现ajax请求的处理。

     1) $.ajax(): jquery中实现ajax的核心函数。
     2) $.post():使用post方式做ajax请求。
     3) $.get():使用get方式发送ajax请求。

$.post()和$.get() 他们在内部都是调用的 $.ajax() 

介绍 $.ajax函数的使用, 函数的参数表示请求的url, 请求的方式,参数值等信息。
     $.ajax()参数是一个json的结构。格式:$.ajax(  {名称:值, 名称1:值1..... } )              

$.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处理后的数据。}
 })

json结构的参数说明:

      1)async:是一个boolean类型的值, 默认是true ,表示异步请求的。可以不写async这个配置项xmlHttp.open(get,url,true),第三个参数一样的意思。

      2)contentType: 一个字符串,表示从浏览器发送服务器的参数的类型。 可以不写。例如你想表示请求的参数是json格式的, 可以写application/json

     3)data: 可以是字符串,数组,json,表示请求的参数和参数值。 常用的是json格式的数据。

      4)dataType: 表示期望从服务器端返回的数据格式,可选的有: xml , html ,text ,json,当我们使用$.ajax()发送请求时, 会把dataType的值发送给服务器, 那我们的servlet能够读取到dataType的值,就知道你的浏览器需要的是 json或者xml的数据,那么服务器就可以返回你需要的数据格式。

      5)url:请求的地址

      6)type:请求方式,get或者post, 不用区分大小写。 默认是get方式。

      7)error: 一个function ,表示当请求发生错误时,执行的函数。
                error:function() {   发生错误时执行  }  

     8)sucess:一个function , 请求成功了,从服务器端返回了数据,会执行success指定函数,之前使用XMLHttpRequest对象, 当readyState==4 && status==200的时候。

  主要使用的是 url , data ,dataType, success 
下载的JQuery库文件,放到webapp下,JSON数据格式还需要JSON依赖

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

标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。