资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

ajax与json思维导图及知识点梳理

ajax与json思维导图及知识点梳理

达拉特ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

ajax概述

  • AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

  • AJAX = 异步 JavaScript和XML

  • AJAX 是一种用于创建快速动态网页的技术。

  • AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

  • 通过在前台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

应用场景

  • 用户名校验

  • 百度自动补全

  • 商品查找

  • 搜索图片

javaScript中使用ajax(理解)

原生ajax

入门案例

  • 1.创建一个核心对象(XMLHTTPRequest)该对象称之为ajax引擎

  • 2.编写onreadystatechange事件所调用的函数回调函数

  • 3.确定请求方式和请求路径

  • 4.发送请求

  • 5.处理返回结果

api详解

创建核心对象(XMLHttpRequest)

js代码  ------>  翻译器(js引擎)  -----> 被所有浏览器内置

ajax引擎对象被js引擎所包含

var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();   }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   }

属性

  • onreadystatechange事件在ajax对象状态发生改变时,就会触发该事件对象.onreadystatechange = function(){}

  • readyState

    存有 XMLHttpRequest 的状态

    • 0: 请求未初始化

    • 1: 服务器连接已建立

    • 2: 请求已接收

    • 3: 请求处理中

    • 4: 请求已完成，且响应已就绪

  • status响应状态码if(xmlhttp.readyState==4 && xmlhttp.status == 200){ 执行的代码片段}

  • responseText获取服务器响应回来的文本信息

常用方法

  • open(method,url,[async])

    设置请求的类型,请求地址以及是否异步处理请求。

    • method：请求的类型；GET 或 POST

    • url：文件在服务器上的位置

    • async：true（异步）或 false（同步）

  • send([string])

    将请求发送到服务器

    • string：存放post请求携带的参数

  • 在post请求时要设置请求参数的mime类型xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

小结:

原生ajax使用方式:

1.创建核心引擎对象(XMLHttpRequest)

        // 复制

    2.编写回调函数(监听ajax引擎对象的状态变化)

        xmlhttp.onreadystatechange=function(){

        if(xmlhttp.readyState==4 && xmlhttp.status == 200){

// 获取响应结果信息,并处理信息

                xmlhttp.responseText; 

}

    }

3.设置请求方式和请求路径

// get请求携带参数拼接在请求路径后面 ?参数=值&参数=值

xmlhttp.open(method,url,[async]);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4.发送请求

// 参数格式: 参数=值&参数=值

// post请求携带的参数要想提交给服务器需要设置请求参数的mime类型

xmlhttp.send([post请求携带的参数]);

jQuery中使用ajax(★)

$.post(url,[params],fn,[type])

发送post请求

  • url:请求的路径

  • params:请求的参数

    • 格式1:字符串 key1=value1&key2=value2

    • 格式2:json格式{"key1":value1,"key2":value2}

  • fn:回调函数 (ajax请求执行完成后调用的函数)function(data){ //data:响应回来的数据 （xmlHttp.responseText）}

  • type:返回内容的格式   text xml json

    默认返回text类型的数据

    一般不需要自己设置,如果需要设置一般设置为 "json"

$.get(url,[params],fn,[type])

发送get请求

$.ajax({url,[settings]})

  • url:请求路径

  • type:请求方式

  • data:请求参数

  • success:请求成功后的回调函数

  • error:请求失败时调用此函数

  • dataType:服务器返回的数据类型一般不需要自己设置,如果需要设置一般设置为 "json"

  • async:设置是否异步提交 默认值为true(异步提交)

  • 例如:$.ajax({ url:url, data:params, type:"post", success:f, error:function(){alert("失败了")}, async:true});

  • 注意事项: 默认get方式提交  

新增签名方式:

$.get({[settings]});

  • url:请求路径

  • data:请求参数

  • success:请求成功后的回调函数

  • error:请求失败时调用此函数

  • dataType:服务器返回的数据类型一般不需要自己设置,如果需要设置一般设置为 "json"

  • async:设置是否异步提交 默认值为true(异步提交)

$.post([settings]);

  • url:请求路径

  • data:请求参数

  • success:请求成功后的回调函数

  • error:请求失败时调用此函数

  • dataType:服务器返回的数据类型一般不需要自己设置,如果需要设置一般设置为 "json"

  • async:设置是否异步提交 默认值为true(异步提交)

json

xml:

作用:

配置文件

数据传递的载体  ----> json

概述:

  • JavaScript 对象表示法（JavaScript Object Notation）

  • 是存储和交换文本信息的语法。类似 XML

  • 比 XML 更小、更快，更易解析

格式:

  • 格式1:json对象  

    • { "key":"value" , "key":value }

      key: String

      value可以为任意类型的数据  

  • 格式2:json数组

    • ["aa","bb",123,true]

  • 格式3:混合json

    • [{"name":"张三","age":18},{"name":"张三","age":18}]

    • {"sudent":["张三","李四","王五"]};

javaScript中使用json

java对象转json串

List:

张三 李四 王五 赵六 田七

list转json: (json在java中以字符串的形式体现)

"['张三','李四'...]"

常见工具类
jsonlib

  • 1.导入jar包

  • 2.使用api

    • JSONArray.fromObject(数组或者list)

    • JSONObject.fromObject(对象或者map)

fastjson(阿里巴巴)

  • JSON.toJSONString(str)可以转一切对象

gson(google)

  • 使用步骤:

    • 1.Gson g = new Gson();

    • 2.g.toJson(对象);可以转一切对象

Jackson

开源免费的json转换工具，springmvc转换默认使用jackson

  • 导入json相关jar包

  • 创建核心解析对象

    • ObjectMapper om = new ObjectMapper();

    • om.writeValueAsString(obj)

案例:

案例1-检测用户名是否已经被注册

需求分析:

在注册页面上,当用户在用户名的输入框中输入完用户后,失去焦点时发送ajax请求,校验该用户名是否存在.

    该用户名已存在:

提示: "该用户名已被占用"

    该用户名不存在:

提示: "✔"

 技术分析:

blur: 失去焦点事件

ajax:

$.post(url,params,function(data){},"json|text");

步骤分析:

前台:

提供注册页面,给用户名的输入框添加失去焦点事件

        输入框对象.blur(function(){

        // 发送ajax请求

        var url = "demo1";

        var params = {"username":"tom"};

            $.post(url,params,function(data){

            // 判断执行结果...

            },"text");

        });

后台:

web:

Demo1Servlet:

a.获取请求携带的参数信息: username

b.调用service处理业务逻辑

boolean flag = service.isRegister(username);

c.判断执行结果

            if(flag){

            // 当前用户名可以使用

            }else{

            // 用户名已被占用    

            }

service:

isRegister(username)

            {

                User user = dao.isRegister(username);

                return user == null ? true : false ;

            }

dao:

isRegister(username)

            {

                sql = "select * from user where username = ? ";

                user;

            }

案例2-异步自动填充

需求分析:

当用户在搜索框中输入关键字,键盘弹起时,获取用户输入的关键字,向服务器发送ajax请求,将匹配的热搜词展示到输入框下面.展示4条.

技术分析:

keyup: 键盘弹起事件

ajax:

步骤分析:

前台:

给搜索框添加键盘弹起事件:

搜索框对象.keyup(function(){

    // 发送ajax请求

    var url = "demo2";

        var params = {"keyWords":"t"};

            $.post(url,params,function(data){

            // 展示结果

            },"json");

});

后台:

web:

Demo2Servlet:

//a.获取用户输入的关键字

String keyWords = req....;

//b.调用service处理业务逻辑

List list = service.findKeyWords(keyWords);

//c.将执行结果写回给ajax请求

service:

findKeyWords(keyWords) 

            {

                return dao.findKeyWords(keyWords);

            }

dao:

findKeyWords(keyWords)

            {

                sql = "select name from user where name like ? limit 4 ";

                template.queryForList(sql,Object.class,"%"+keyWords+"%");

            }

总结:

前后端分离:

同步 + 异步

ajax:

JavaScript的ajax: 原生ajax

1.创建ajax引擎对象: XMLHttpRequest

2.编写监听ajax对象状态变化的函数

// 5.判断状态码处理响应结果

3.设置请求方式和请求路径

4.发送请求

jq:

$.post(url,params,function(data){},"text|json"); ★

$.get(url,params,function(data){},"text|json"); ★

    $.ajax({

url:url,

        type:"get|post",

        data:params,

        success:function(data){},

        dataType:"text|json"

    });

$.get({

url:url,

        data:params,

        success:function(data){},

        dataType:"text|json"

    });

$.post({

url:url,

        data:params,

        success:function(data){},

        dataType:"text|json"

    });

json: ★

格式:

json对象: {}

json数组: []

混合json: [] {}

将java对象转成json: ★

jackson:

new ObjectMapper()

            om.writeValueAsString(obj);



文章标题：ajax与json思维导图及知识点梳理
文章位置：http://cdkjz.cn/article/pdecdo.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
专业网站设计全网营销网站推广渠县网站建设艾名斯智能网络营销推广成都橡塑保温板网站搜索引擎优化成都花箱德阳服务器托管成都制作网站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图