本文共 2404 字，大约阅读时间需要 8 分钟。

一、ajax

1.1 ajax概述

ajax(Asynchronous JavaScript and XML) 异步的JavaScript 和 XML，是指一种创建交互式、快速动态网页应用的网页开发技术，通过在后台与服务器进行少量数据交换 , 无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax可以在页面进行局部刷新时完成和后台的数据交互。

1.2 同步与异步

同步：

• 当浏览器发送请求之后，在服务器处理请求时，浏览器处于同步等待状态，不能做其他的事情
• 当请求执行完成，浏览器处理响应时，可能会出现页面跳转（转发，重定向）

异步：

• 当浏览器发送请求之后，在服务器处理请求时，浏览器不受影响，可以执行其他操作
• 当服务器处理完成请求之后，把数据响应回浏览器采用的方式只能是：用流输出

1.3 原生ajax

原生ajax执行过程：

1. 打开和服务器的连接：open(请求的方式,请求的地址)
2. 真正发送请求：send()
3. 处理服务器响应：onreadystatechange()
   处理时机：

执行状态为4

响应状态为200

原生ajax代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>            用户名:    

readyState属性存有服务器响应的状态信息，每当readyState改变时，onreadystatechange()函数就会执行。

readyState属性值与对应状态：

1.4 axios组件

axios组件底层就是原生的ajax代码 , 只不过在原生代码上进行了封装, 简化了代码。

常用语法：

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

使用方式：

• url : 请求地址
• then(function(响应对象){}) : 回调函数只有当XmlHttpResquest.status为200时才执行
• 响应对象.data : 响应的数据

二、json

2.1 json概述

JSON(JavaScript Object Notation) JavaScript对象表示法，是基于ECMAScript子集的一种轻量级数据交换格式。

JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族（包括C、C++、C#、Java、JavaScript、Perl、Python等）的习惯，易于人阅读和编写，同时也易于机器解析和生成；这些特性使JSON成为理想的数据交换语言。

JSON特点：速度快，占用小，易于解析。

JSON一般用于主要实现信息的存储与交换 。

2.2 语法规则

1. json 中的数据由键值对组成，键值对之间用,分隔开
   — 键：由双引号或者单引号括起来。
   — 值：数值(小数、整数)，字符串，布尔值(false，true)，数组
2. 数组使用中括号
3. json对象使用大括号

{
    "name" : "张三","age" : 20,"gender" : "男", "isStudent" : true}

{
    "users" : [    {
    "name" : "张三","age" : 20,"gender" : "男" , "isStudent" : true},    {
    "name" : "李四","age" : 21,"gender" : "女" , "isStudent" : true},    {
    "name" : "王五","age" : 20,"gender" : "男" , "isStudent" : true},    ...]}

2.3 json数据的获取

• json对象.键
• json对象[“键”]
• 数组对象[索引]

三、省市联动

效果展示：当切换省份的时候 , 出来对应的市区

   
    
    
基本资料
    
    
        
     
            
      昵称：            
              
     
        
     
            
      性别：            
              
     
        
     
            
      生日：            
              
     
        
     
            
      省份：             
                      请选择省                    
     
        
     
            
      市区：            
                      请选择市区                    
     
        
     
            
              
     
    
    
    
    
   

转载地址：http://icwei.baihongyu.com/