AJAX和JSON

Ajax

概念解析

  • 英文名:Asynchronous Javascript And XML
  • 中文名:阿(ei)贾(zhai)克斯
  • 解释:异步的js和xml,用于创建动态网页技术。而且不用加载整个页面的情况,只更新部分网页,主要应用类型:评论,用户评论提交后,因为需要更新内容,必然加载整个网页,假如当正在观赏视频时候,重新加载页面,video会重新从0开始播放,这就很难受,而ajax的出现正是解决了这个难题。
  • Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
  • 使用 JavaScript向服务器提出请求并处理响应而不阻塞用户!核心对象是XMLHTTPRequest。通过这个对象,JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。
  • Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

使用方式

1.需要创建一个XMLHttpRequest对象,

//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
var xhr = new XMLHttpRequest();
//老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
  1. 监听变化
    • 使用onreadystatechange 事件。
      • onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
      • readyState(请求状态码):
        1. 0:请求未初始化
        2. 1: 服务器连接已建立
        3. 2: 请求已接收
        4. 3: 请求处理中
        5. 4:请求已完成,且响应已就绪
      • status(状态): 200: “OK” ,404: 未找到页面
正规做法
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        document.getElementById("xxx").innerHTML=xmlhttp.responseText;
    }
}
另一种:
//当完成请求时也就是xmlhttp.readyState==4 && xmlhttp.status==200。
// 响应返回会触发 onload事件,执行事件对应的函数
xhr.onload = function () {
  var v =  xmlhttp.responseText;
};
使用onload事件就无需判定状态以及状态码了
  1. 响应格式

    • 从后台返回的响应数据如何接收
      • responseText:获得字符串形式的响应数据。
      • responseXML:获得 XML 形式的响应数据。
  2. 发送请求

    • open方法里参数有三个:
    • (get|post),请求方式。
      • get请求只有请求行和请求头 ,经常使用来查询信息。
      • post请求包含请求行、请求头、请求体,常被使用来修改后台数据
    • 请求地址url:任何类型文件。
    • 异步开启:使用异步为true,否则为false。
get请求:
xhr.open("get", 请求地址, true|false); // 发请求前准备
xhr.send(); // 真正发送请求

post请求:
xhr.open("post", "/carrots-admin-ajax/a/login",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&pwd=" + code);  //参数
两段代码理解一下
function post(url, param, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() { // 当 onload 事件发生时,才会执行 c 函数
        callback(xhr); // 调用 c 函数
    };
    xhr.open("post", url, true);
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.send(param);
}

function get(url, param, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() { // 当 onload 事件发生时,才会执行 c 函数
        callback(xhr); // 调用 c 函数
    };
    xhr.open("get", url+"?"+param, true);
    xhr.send();
}

其他知识

  • 一个完整的Http请求过程
    1. 域名解析
    2. tcp三次握手
    3. 客户端发送http请求
    4. 服务器响应发送响应数据
    5. 客户端得到数据
    6. 呈现界面
    7. 断开连接
  • http的四个组成部分
    1. http请求的方法或者动作(post|get)
    2. 请求地址 URL
    3. 请求头
    4. 请求体

响应格式的第一种: responseTex

  • 这里返回响应的虽然是字符串,但是更常用的是使用JSON作为服务器与AJAX的数据传输(主要是响应返回的数据)。

JSON

概念解析

  • JavaScript Object Notation(JavaScript 对象表示法),一种存储和交换文本信息的语法。JSON 比 XML 更小、更快,更易解析。

特点

  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
  • JSON 具有自我描述性,更易理解

转换

var js对象 = JSON.parse(json字符串);
var json字符串 = JSON.stringify(js对象);

为什么使用 JSON?

  • JSON正逐渐代替XML成为首选的数据交换格式,这是因为JSON容易阅读并且它的结构匹配常见的编程概念,诸如对象和数组。JSON也比XML更高效(即更快的解析和网络传输),这是因为JSON更紧凑——没有开始和结束标签。

数据结构,语法规则以及支持的数据类型

  • 数据结构
    • 键/值对。
    • 对象。
    • 数组。
  • 语法规则
    • 数据在名称/值对中
    • 数据由逗号分隔
    • 大括号保存对象
    • 中括号保存数组
  • 数据类型
    • 数字(整数或浮点数)
    • 字符串(在双引号中)
    • 逻辑值(true 或 false)
    • 数组(在中括号中)
    • 对象(在大括号中)
    • null
例如
var v = 
{
    "name""Xxx",  //key只能是string value可以是任意的json支持的数据类型
    "age":20, 
    "boolean":true
    "sites": [  //sites数组里面存储的对象
    { "name":"教程" ,   "url":"www.zzz.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

访问json的值

  • “.”语法:访问对象的属性的值
v.name = "Xxx"

-[]访问数组的值

v.sites[0]  //得到数组的第一个对象

练习:类似于一个选择自己省市县地址的下拉列表

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/1/20
  Time: 10:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省市区选择练习</title>
</head>
<body><select id = "sheng" onchange="findShi()"></select><select id = "shi" onchange="findXian()"></select><select id = "xian" ></select>
    <script>
        function findXian() {  //第三步 找县 
            // 获取市当前选中的 option 的 value
            var parentId = document.getElementById("shi").value;
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                var json = xhr.responseText;
                var list = JSON.parse(json);
                // 添加之前要清除下拉列表的内容
                document.getElementById("xian").innerHTML = "";
                // 添加新内容
                for(var i = 0 ; i < list.length; i++) {
                    var region = list[i];
                    // js 生成标签
                    var option = document.createElement("option"); // <option></option>
                    option.value = region.regionId; // <option value="2"></option>
                    option.innerText = region.regionName; // <option value="2">北京</option>
                    // 把它添加给 县 这个父元素
                    document.getElementById("xian").appendChild(option);
                }
            };
            xhr.open("get", "/region?parentId=" + parentId, true);
            xhr.send();
        }
        function findShi() {   //第二步 找市
            // 获取省当前选中的 option 的 value
            var parentId = document.getElementById("sheng").value;
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                var json = xhr.responseText;
                var list = JSON.parse(json);
                // 添加之前要清除下拉列表的内容
                document.getElementById("shi").innerHTML = "";
                // 添加新内容
                for(var i = 0 ; i < list.length; i++) {
                    var region = list[i];
                    // js 生成标签
                    var option = document.createElement("option"); // <option></option>
                    option.value = region.regionId; // <option value="2"></option>
                    option.innerText = region.regionName; // <option value="2">北京</option>
                    // 把它添加给 市 这个父元素
                    document.getElementById("shi").appendChild(option);
                }
                // 联动
                findXian();
            };
            xhr.open("get", "/region?parentId=" + parentId, true);
            xhr.send();
        }
        function findsheng() { 第一步  //找省
            var xhr = new XMLHttpRequest();
            xhr.onload = function()  {
              var region =  xhr.responseText;
              var list = JSON.parse(region);
                for (var i = 0; i < list.length; i++) {
                    var region  = list[i];
                    //js生成标签
                    var option = document.createElement("option");  // <option></option>
                    option.value = region.regionId;   // <option value="2"></option>
                    option.innerText = region.regionName;// <option value="2">北京</option>
                    // 把它添加给 省 这个父元素
                    document.getElementById("sheng").appendChild(option);
                }

                // 联动
                findShi();
            };
            xhr.open("get","/region?parentId=1",true);
            xhr.send();
        }
        findsheng();
    </script>
</body>
</html>


后台服务器代码就是一个连接数据库,使用JDBC查询一个数据库的表;查询到的结果是一个list集合,以json作为数据的传送方式。


©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页