js中的ajax和jquery中的ajax学习笔记

js中的ajax和jquery中的ajax学习笔记

一、JS中的Ajax

ajax:异步访问/局部刷新

1.同步和异步

2.Ajax的运行原理

页面请求---->Ajax引擎----->提交给服务器端

这段时间可以做任何事情

服务器端响应------>Ajax引擎----->触发设置好的事件,执行自定义的js逻辑代码,然后显示页面

js改变页面,其原理是改变的是内存

3.ajax实现

  • 创建ajax引擎
  • 为ajax对象绑定监听
  • 绑定提交地址(get/post)
  • 发送请求
  • 接受响应数据(在监听对象里面接收数据)

    js代码:

    var xmlhttp = new XMLHttpRequest();//1.创建引擎对象
        //2.绑定监听
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readeyState == 4&& xmlhttp.Status == 200){
                //5.接受响应数据-----接受服务器响应的数据可以是json格式的数据
                var res = xmlhttp.responseText();
                alert(res);
        }
    }
    
    3.绑定提交地址
    xmlhttp.open("GET","${pageContext.request.contextPath}/AServlet",true);
    4.发送请求
    xmlhttp.send();//里面可以写发送请求的参数
    

    如果是POST请求的时候需要在绑定提交地址和发送请求中间添加一个请求头

    xmlhttp.setRequestHeader(“Content-Type”,”application/x-www.form-urlencoded”);

总结:

所有的异步访问都是通过ajax引擎

js中的ajax和jquery中的ajax学习笔记

二、JSON传递数据(重点)

1.JSON在ajax中数据传递格式

JSON传递数据的一种格式,当使用异步传输的时候,
当服务器响应数据的时候,需要使用一种格式在客户端和服务端进行传递
当服务端响应给客服端的时候响应的是字符串或者xml(ResponseText/ResponseXML),
如果响应一个对象给客户端的时候就不能表示.

2.JSON格式

  • JSON格式

    格式:对象格式:{"key1":obj,"key2":obj,"key3":obj,.....}
         集合/数组格式:[obj,obj,obj,....]
        1)user对象,使用json来表示:
            {"username":"kevin","age":28,"hobby":"打游戏"}
        2)List<User>使用Json来表示:
            [{"username":"cidy"},{"username":"tome","password":"123"}]
    注意:
        json里面的key是字符串,json里面的value是Object
        这两种形式可以相互嵌套,具体怎么嵌套需要根据的自己的业务来
    
  • 如何从JSON里面取数据

    json是js原生的内容,在js里面可以直接取出json里面的数据
        比如在js代码里面:
        1)对象形式:
            //person是json对象
            var person = {"username":"kevin","password":"123","age":28}
            //取age
            alert(person.age);//28
        2)集合形式
                var pesons = [
                              {"usranme":"kevin"},
                              {"username":"tome"},
                             ];
                //取tome
                alert(persons[1].username);//tome
        3)对象里面嵌套集合
                var json = {"key":[{},{},{}]}
                var json = {
                            "username":[
                                        {"name":"kevin"},
                                        {"name":"lishi"},
                                        {"name":"wangwu"},  
                                    ]
                        }
                //取出lishi
              alert(json.username[1].name);//lishi
        4)对象里面的多个key对应value是一个集合,集合里面嵌套对象
                {
                 "param1":[{key:value,key:value},{key:value,key:value}],
                 "param2":[{key:value,key:value},{key:value,key:value}],
                 "param3":[{key:value,key:value},{key:value,key:value}]
               }
        5)混合形式
            {
             "param1":"value1",
             "param2":{},
             "param3":[{key:value,key:value},{key:value,key:value}]
            }
        其实上面取数据也可以叫做对象导航,
        在EL表达式中,我们把数据存储在javaben中的时候也可以像这种形式(对象导航来)取数据
        注意:
            在json里面取数据,如果是集合的形式我们是通过下标来确定位置,然后像java中对象调用方法从而取到自己想要的数据
    
  • json插件

三、jQuery中的Ajax(重点)

    再实际开发中使用下面三种方式:
    $.post(url,[date],[callback],[type]);
    $.get(url,[date],[callback],[type]);
    $.ajax([options]);
  1. .post(url,[date],[callback],[type]) .get(url,[date],[callback],[type])

    - url://请求路径
    - date:把什么数据传递给服务器,可以是json格式(请求参数)
    - callback:服务端成功响应所触发的事件,只有正常成功返回才能执行
    - type:返回的格式,一般我们写json格式或者text格式,其实还有xml,html格式等
    

    思路分析:

    $.get(
            //提交的地址,相当于open里面的其中一个url参数
            "${pageContext.request.contextPath}/ajaxServlet2",
    
            //传递参数,参数的形式可以写成json形式
            {"name":"keivn","age":28},
    
            //服务端成功响应所触发的事件,
            //在ajax中这里相当于xmlhttp.onreadystatechange部分
            //函数里面的参数date表示服务器成功响应给客户端的数据,
            //响应给客户端的数据我们在服务器端可以写成字符串形式的json格式
            //比如:"{\"name\":\"tome\",\"age\":\"29\"}",  
            //需要注意的是不能用单引号,只能用转义字符,因为jquery在进行解析的时候
            //会调用jQuery.parseJSON(json)这个方法进行解析,如果用单引号会出现畸形的
            //json格式的字符串,所谓畸形的json字符串有以下两种:
            //{test: 1} ( test 没有包围双引号)
            //{'test': 1} (使用了单引号而不是双引号)
            //另外,如果你什么都不传入,或者一个空字符串、null或undefined,
            //parseJSON都会返回 null 。
            //这里的名称可以随便取名字
            function (date){
                alert(date);
            }
    
            //type:返回的格式
            //如果服务器端返回的是json格式的字符串,这里我们
            //用text类型进行解析,返回的是json格式的字符串
            //如果使用json进行解析,返回的是json对象,那么我们都可以用json对象导航
            //取出我们想要的数据
            "text"  //“json"
        );
    

    注意:post请求和get请求的写法是一样的,但是jquery中的post请求,他处理了中文问题,在服务器端接受请求数据的时候,不必要写request.setCharacterEncoding(“utf-8”)进行处理乱码,而get请求的时候需要我们先解码,在编码进行处理乱码问题

        String name = request.getParameter("name");
        name = new String (name.getBytes("iso-8859-1"),"utf-8");
    
  2. $.ajax([options])

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100806.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 使用admixture进行群体结构分析「建议收藏」

    使用admixture进行群体结构分析「建议收藏」使用admixture进行群体结构分析

    2022年10月25日
  • WINDOWS XP安装SQL2000方法

    一.在SQL服务器的安装盘中找到MSDE这个目录,并且点击setup.exe安装它,过程简单直接下一步就OK了。二.重启系统WINDOWSXP,这下就可以看到SQL服务的图标出现了。三.再拿出SQL服务器版的安装光盘,直接安装客户端工具(最简单的方法就是直接点击光盘根目录下的autorun.exe)根据提示安装,自检过程中知道系统不是SERVER版,会提示只安装客户端工具。四.打开企业管理器

  • java tcp数据包_java tcp封装成数据包【相关词_ tcp数据包处理java】

    2-1.数据序号32位,TCP为发送的每一个字节都编一个号码,这里存储当前数据包数据第一包括网络编程结构数据JavaTCPIP的信息,所有JAVA网络编程:TCP/IP数据包结构相关内Java实现以太网帧的封装_360问答600×312-74KB-PNG第三篇:微信公众平台开发实战Java版之请求消1054×564-171KB-JPEG求助!wireshark抓取分析htt…

  • 通过subString()方法来进行字符串截取

    通过subString()方法来进行字符串截取1.通过subString()方法来进行字符串截取。subString通过不同的参数来提供不同的截取方式1.1只传一个参数例如:Stringsb="bbbdsajjds";sb.substring(2);12将字符串从索引号为2开始截取,一直到字符串末尾。(索引值从0开始);1.2传入2个索引值Stringsb="bbbdsajjds";sb.substri…

  • pycharm配置Git和Github[通俗易懂]

    pycharm配置Git和Github[通俗易懂](Windows)pycharm配置Git和Github,协同开发1、安装Git1.1、验证是否安装git#cmd命令git–version#显示git版本则证明安装成功1.2、下载gitwindow下载链接安装好git之后,配置环境变量,验证git是否安装成功。1.3、配置git用户名和邮箱gitconfig–globaluser.name用户名gitconfig–globaluser.email邮箱1.4、在pycharm中配置git点击Fil

  • Ubuntu命令备忘

    Ubuntu命令备忘

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号