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

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<Object> 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);