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)


相关推荐

  • java velocity 语法_Velocity 语法

    java velocity 语法_Velocity 语法VelocityNotes变量名$name为空时打印变量本身。$!name为空时打印空字符串(不打印任何内容)。${name}类似$name,为空时原样打印。但可以将变量和连续的字符串分隔,例如:${name}space。$!{name}类似$!name,为空时打印空字符串,但可以将变量和连续的字符串分隔。例如:$!{name}space。$name$!name${name}$!{name…

  • rpm 安装冲突「建议收藏」

    rpm 安装冲突「建议收藏」1.要安装的包比已安装的包旧,则采用降级的方式安装 rpm -Uvhkpartx-0.4.9-72.el6.x86_64.rpm –oldpackage 2.安装的包比已安装的包新,则直接升级即可 rpm -Uvhkpartx-0.4.9-72.el6.x86_64.rpm  或者末尾追加 –replacefiles  或  –repl…

  • linux fusion io简介,linux – 收集FusionIO库存

    linux fusion io简介,linux – 收集FusionIO库存我需要编写一个脚本,从Linux服务器收集FusionIO驱动器的库存数据.我能找到的唯一方法是fio-status实用程序,但它的目的是输出人类可读的文本,而不是机器可解析的文本.我可以刮它,但那很脏.我检查/proc/fusion但它没有足够的信息可供任何使用.我希望有更好的方法,可以通过某种方式与libiodrivesdk.so或已经存在的实用程序进行交互来完成这项工作.我最初使用的是…

    2022年10月22日
  • 实战中遇到的C++流文件重置的一个大陷阱 为什么ifstream的seekg函数无效

    实战中遇到的C++流文件重置的一个大陷阱 为什么ifstream的seekg函数无效实战中遇到的C++流文件重置的一个大陷阱为什么ifstream的seekg函数无效

  • linux中getchar函数用法,linux getchar函数使用

    linux中getchar函数用法,linux getchar函数使用1函数介绍1)函数原型intgetchar(void);2)函数功能从stdin中读取一个字符。3)返回值返回读取字符的ASCII值或者EOF字符或者出错值。4)头文件#include2函数使用2.1getchar函数的特点Linux下编写的一个例子:#includeintmain(void){charch;intnum;num=0;printf…

    2022年10月18日
  • 齐博建站指南(艾戈勒)

    齐博建站指南使用手册http://www.qibosoft.com/help/          /template/default/list_tpl1、新建风格:template/XXX  data/style 下新建XXX.php2、需要全部静态的话,需要录入php标识的头尾3、加载list模块

发表回复

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

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