ajax

2019-03-19 13:53 缩酒阅读(115) 评论(0) 编辑收藏举报

1. 传统交互方式的弊端：

浏览器<-->请求/响应<-->服务器

客户端（浏览器）从服务器加载网页完毕后，网页中的内容如果需要更改，那么就必须让浏览器重新发送一次请求到服务器，服务器接收请求并处理完毕后会把一个完整的网页返回给客户端（浏览器），

每次操作都必须返回整个页面，带宽，响应速度都有影响的。

2. AJAX交互方式：

AJAX<-->请求/响应<-->服务器

网页中的内容如果需要更改，不使用浏览器发送请求，而是使用JavaScript中的XMLHttpRequest（及Ajax对象）对象发送请求到服务器，服务器接收请求并处理完毕后只返回页面需要的内容，XMLHttpRequest对象接收服务器返回的内容，程序员需要手动(javascript)的把内容更新到页面中。

3. 什么是ajax

　　ajax解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新（不重新加载整个网页的情况下，对网页的某部分进行更新，提高用户的使用体验。

4. 哪些场景需要使用ajax ？

需要局部刷新的页面(要求：至少说出4个)

浏览器地图搜索
自动提示：Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。3
用户名重复检查：用户注册时，检查用户名是否存在，及时给用户反馈；4
邮箱提示：WEB版邮箱系统，当有新邮件到底服务器，浏览器不用刷新页面也知道是否有新邮件；5
无刷新分页：显示数据列表，用户点击下一页数据，整个页面不会刷新，只把下一页的数据更新到页面中；6
购物车：用户点击添加到购物车后，能继续进行其他操作，而购物车的数据存储服务器端；=
用户登录：用户登录的数据通过AJAX传输到后台，如果登录失败直接在当前登录页面提示用户，而不用刷新整个页面；

　如果应用中的页面需要局部刷新并且需要与服务器交互，那么就可以使用AJAX；

视频网站
股票网站(轮询)

秘诀：浏览网站的时候，留心观察很多页面未刷新，但是页面中的内容被更改了，这些都是AJAX使用场景； 99%的网站都会用到Ajax。

5. 同步和异步

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包。（提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事）

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包。（请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕）

6.ajax学习：

1：一个事件 onreadystatechange

2：2个状态 status readyState

3：三个方法 open send setRequestHeader

onreadystatechange，存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

status HTTP响应状态

　　200: "OK" 请求成功

　　404: "NOT FOUND" 没有找到对应资源

　　500:"Server Error" 服务器端错误

readyState

　　存有 XMLHttpRequest对象的请求状态。从 0 到 4 发生变化。

　　0: 请求未初始化未创建

　　1: 服务器连接已建立 open()方法

　　2: 请求已接收 send()方法

　　3: 请求在服务器处理中

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

open(method,url,async)

　　创建请求，并且规定请求的类型、URL 以及是否异步处理请求。

　　method：请求的类型；GET 或 POST

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

　　async：true（异步），false（同步）

send(string) 将请求发送到服务器。

　　string：仅用于 POST 请求，字符串必须服务器URL编码格式（列如：param1=value1¶m2=value2）;

setRequestHeader(header,value)。 添加额外的请求头信息，post提交必须使用。

　　向请求添加 HTTP 头。

　　header: 规定头的名称

　　value: 规定头的值

　　注意：该方法必须在open与send之间调用；

　　原因：

　　1、open之后，open是创建一个请求，或者理解为请求的基本准备，如果没有请求，何来设置请求头信息；

　　2、send之前，send是发送一个请求，请求会把当前请求的头信息进行发送，发送后设置头信息无效；

7 Ajax正确写代码流程

Ajax检查用户名是否重复

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="" method="post">
        用户名:<input type="text" name="username" onblur="checkName(this)"/><span id="msg"></span><br/><br/>
    </form>
    <input type="button" id="register" value="注册"/>
</body>
<script type="text/javascript">
    var ajax;
    function createAjax(){
        if(window.XMLHttpRequest){
            ajax = new XMLHttpRequest;
        }else{
            //低版本ie浏览器
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
     
    function checkName(ele) {
        var username = ele.value;
        //1. 获取ajax对象
        ajax = createAjax();
        //2.以异步的方式发出get请求
        //ajax.open("GET","checkNameServlet?username="+username+"&flag="+Math.random(),true);
        ajax.open("POST","checkNameServlet",true);
        //3. 设置请求头
        ajax.setRequestHeader("Context-type","application/x-www-from-urlencoded");
        //4. 编写事件函数
        ajax.onreadystatechange = function() {
            if(ajax.readyState==4 && ajax.status==200){
                var data = ajax.responseText;
             
                if(data == "true"){
                    document.getElementById("msg").innerHTML="<font style='color:green'>恭喜您，获得一个新账号</font>";
                    document.getElementById("register").disabled = false;//注册按钮状态可用
                }else{
                    //console.log("用户名重复");
                    document.getElementById("msg").innerHTML="<font style='color:red'>用户名重复</font>";
                    document.getElementById("register").disabled = true;//注册按钮状态禁用
                }
            }
        }
        //get发送请求
        //ajax.send();
        //post发送请求
        ajax.send("username="+username);
    }
</script>
</html>

CheckNameServlet.java

@WebServlet("/checkServlet")
public class CheckNameServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        username = new String(username.getBytes(),"UTF-8");
        System.out.println(username+"----------");
        //后台打印布尔值，前台还是获取字符串。
        if(username.equals("admin")) {
            response.getWriter().print(false);//注册失败
             
        }else{
            response.getWriter().print(true);//注册成功
        }
    }
}

8.　jquery省市

City.java

package com.gs.domain;
 
public class City {
    private Long id;
    private String name;
    private City parent;
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public City getParent() {
        return parent;
    }
    public void setParent(City parent) {
        this.parent = parent;
    }
    public City(Long id, String name, City parent) {
        super();
        this.id = id;
        this.name = name;
        this.parent = parent;
    }
    public City() {
        super();
        // TODO Auto-generated constructor stub
    }
     
}

CityUtils.java

package com.gs.tools;
 
import java.util.ArrayList;
import java.util.List;
 
import com.gs.domain.City;
 
public class CityUtils {
    static List<City> parentCitys = new ArrayList<>();
    static List<City> childrenCitys = new ArrayList<>();
    static {
        Long id=1L;
        City parent = new City(id++,"安徽省",null);
        parentCitys.add(parent);
        City child = new City(id++,"安庆市",parent);
        childrenCitys.add(child);
        child = new City(id++,"合肥市",parent);
        childrenCitys.add(child);
         
        parent = new City(id++,"浙江省",null);
        parentCitys.add(parent);
        child = new City(id++,"宁波市",parent);
        childrenCitys.add(child);
        child = new City(id++,"湖州市",parent);
        childrenCitys.add(child);
        child = new City(id++,"温州市",parent);
        childrenCitys.add(child);
         
        parent = new City(id++,"江苏省",null);
        parentCitys.add(parent);
        child = new City(id++,"南京市",parent);
        childrenCitys.add(child);
        child = new City(id++,"苏州市",parent);
        childrenCitys.add(child);
        child = new City(id++,"无锡市",parent);
        childrenCitys.add(child);
         
    }
    public static List<City> getParentCitys() {
        return parentCitys;
    }
    public static List<City> getChildrenCitys(Long parentId) {
        List<City> temp = new ArrayList<>();//临时存储的集合
        for(City i :childrenCitys) {
            if(i.getParent().getId().equals(parentId)) {
                temp.add(i);
            }
        }
        return temp;
    }
     
}

SelectCity.java

@WebServlet("/selectcity")
public class SelectCity extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/json;charset=utf-8");
        Long id = new Long(request.getParameter("parentid"));
        List<City> childrenCitys = CityUtils.getChildrenCitys(id);
        JSON json = JSONSerializer.toJSON(childrenCitys);
        System.out.println(json);
        response.getWriter().print(json);
    }
 
}

SelectProvince.java

@WebServlet("/selectprovince")
public class SelectProvince extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/json;charset=utf-8");//设置响应类型
        List<City> parentCitys = CityUtils.getParentCitys();
        //将集合转换为json对象
        JSON json = JSONSerializer.toJSON(parentCitys);
        response.getWriter().print(json);
    }
 
}

provincecity.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
</head>
<body>
    省：<select id="province"></select>
    市：<select id="city"></select>
</body>
<script type="text/javascript">
$(function(){
    $.get("selectprovince",null,function(data){
        //i 索引从0开始，obj==this 代表当前  $(data)—— json数据。
        $(data).each(function(i,obj){
            $("#province").append("<option value='"+obj.id+"'>"+obj.name+"</option>");
        });
    });
    $("#province").change(function(){
        $("#city").empty();
        var data ={"parentid":$("#province option:selected").val()};
        //发请求
        $.get("selectcity",data,function(data){
            $(data).each(function(i,obj) {
                $("#city").append("<option >"+obj.name+"</option>");
            });
        });
         
    });
})
</script>
</html>

1. 传统交互方式的弊端：

浏览器<-->请求/响应<-->服务器

每次操作都必须返回整个页面，带宽，响应速度都有影响的。

2. AJAX交互方式：

AJAX<-->请求/响应<-->服务器

3. 什么是ajax

4. 哪些场景需要使用ajax ？

需要局部刷新的页面(要求：至少说出4个)

浏览器地图搜索
自动提示：Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。3
用户名重复检查：用户注册时，检查用户名是否存在，及时给用户反馈；4
邮箱提示：WEB版邮箱系统，当有新邮件到底服务器，浏览器不用刷新页面也知道是否有新邮件；5
无刷新分页：显示数据列表，用户点击下一页数据，整个页面不会刷新，只把下一页的数据更新到页面中；6
购物车：用户点击添加到购物车后，能继续进行其他操作，而购物车的数据存储服务器端；=
用户登录：用户登录的数据通过AJAX传输到后台，如果登录失败直接在当前登录页面提示用户，而不用刷新整个页面；

　如果应用中的页面需要局部刷新并且需要与服务器交互，那么就可以使用AJAX；

视频网站
股票网站(轮询)

秘诀：浏览网站的时候，留心观察很多页面未刷新，但是页面中的内容被更改了，这些都是AJAX使用场景； 99%的网站都会用到Ajax。

5. 同步和异步

6.ajax学习：

1：一个事件 onreadystatechange

2：2个状态 status readyState

3：三个方法 open send setRequestHeader

onreadystatechange，存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

status HTTP响应状态

　　200: "OK" 请求成功

　　404: "NOT FOUND" 没有找到对应资源

　　500:"Server Error" 服务器端错误

readyState

　　存有 XMLHttpRequest对象的请求状态。从 0 到 4 发生变化。

　　0: 请求未初始化未创建

　　1: 服务器连接已建立 open()方法

　　2: 请求已接收 send()方法

　　3: 请求在服务器处理中

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

open(method,url,async)

　　创建请求，并且规定请求的类型、URL 以及是否异步处理请求。

　　method：请求的类型；GET 或 POST

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

　　async：true（异步），false（同步）

send(string) 将请求发送到服务器。

　　string：仅用于 POST 请求，字符串必须服务器URL编码格式（列如：param1=value1¶m2=value2）;

setRequestHeader(header,value)。 添加额外的请求头信息，post提交必须使用。

　　向请求添加 HTTP 头。

　　header: 规定头的名称

　　value: 规定头的值

　　注意：该方法必须在open与send之间调用；

　　原因：

　　1、open之后，open是创建一个请求，或者理解为请求的基本准备，如果没有请求，何来设置请求头信息；

　　2、send之前，send是发送一个请求，请求会把当前请求的头信息进行发送，发送后设置头信息无效；

7 Ajax正确写代码流程

Ajax检查用户名是否重复

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="" method="post">
        用户名:<input type="text" name="username" onblur="checkName(this)"/><span id="msg"></span><br/><br/>
    </form>
    <input type="button" id="register" value="注册"/>
</body>
<script type="text/javascript">
    var ajax;
    function createAjax(){
        if(window.XMLHttpRequest){
            ajax = new XMLHttpRequest;
        }else{
            //低版本ie浏览器
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
     
    function checkName(ele) {
        var username = ele.value;
        //1. 获取ajax对象
        ajax = createAjax();
        //2.以异步的方式发出get请求
        //ajax.open("GET","checkNameServlet?username="+username+"&flag="+Math.random(),true);
        ajax.open("POST","checkNameServlet",true);
        //3. 设置请求头
        ajax.setRequestHeader("Context-type","application/x-www-from-urlencoded");
        //4. 编写事件函数
        ajax.onreadystatechange = function() {
            if(ajax.readyState==4 && ajax.status==200){
                var data = ajax.responseText;
             
                if(data == "true"){
                    document.getElementById("msg").innerHTML="<font style='color:green'>恭喜您，获得一个新账号</font>";
                    document.getElementById("register").disabled = false;//注册按钮状态可用
                }else{
                    //console.log("用户名重复");
                    document.getElementById("msg").innerHTML="<font style='color:red'>用户名重复</font>";
                    document.getElementById("register").disabled = true;//注册按钮状态禁用
                }
            }
        }
        //get发送请求
        //ajax.send();
        //post发送请求
        ajax.send("username="+username);
    }
</script>
</html>

CheckNameServlet.java

@WebServlet("/checkServlet")
public class CheckNameServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        username = new String(username.getBytes(),"UTF-8");
        System.out.println(username+"----------");
        //后台打印布尔值，前台还是获取字符串。
        if(username.equals("admin")) {
            response.getWriter().print(false);//注册失败
             
        }else{
            response.getWriter().print(true);//注册成功
        }
    }
}

8.　jquery省市

City.java

package com.gs.domain;
 
public class City {
    private Long id;
    private String name;
    private City parent;
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public City getParent() {
        return parent;
    }
    public void setParent(City parent) {
        this.parent = parent;
    }
    public City(Long id, String name, City parent) {
        super();
        this.id = id;
        this.name = name;
        this.parent = parent;
    }
    public City() {
        super();
        // TODO Auto-generated constructor stub
    }
     
}

CityUtils.java

package com.gs.tools;
 
import java.util.ArrayList;
import java.util.List;
 
import com.gs.domain.City;
 
public class CityUtils {
    static List<City> parentCitys = new ArrayList<>();
    static List<City> childrenCitys = new ArrayList<>();
    static {
        Long id=1L;
        City parent = new City(id++,"安徽省",null);
        parentCitys.add(parent);
        City child = new City(id++,"安庆市",parent);
        childrenCitys.add(child);
        child = new City(id++,"合肥市",parent);
        childrenCitys.add(child);
         
        parent = new City(id++,"浙江省",null);
        parentCitys.add(parent);
        child = new City(id++,"宁波市",parent);
        childrenCitys.add(child);
        child = new City(id++,"湖州市",parent);
        childrenCitys.add(child);
        child = new City(id++,"温州市",parent);
        childrenCitys.add(child);
         
        parent = new City(id++,"江苏省",null);
        parentCitys.add(parent);
        child = new City(id++,"南京市",parent);
        childrenCitys.add(child);
        child = new City(id++,"苏州市",parent);
        childrenCitys.add(child);
        child = new City(id++,"无锡市",parent);
        childrenCitys.add(child);
         
    }
    public static List<City> getParentCitys() {
        return parentCitys;
    }
    public static List<City> getChildrenCitys(Long parentId) {
        List<City> temp = new ArrayList<>();//临时存储的集合
        for(City i :childrenCitys) {
            if(i.getParent().getId().equals(parentId)) {
                temp.add(i);
            }
        }
        return temp;
    }
     
}

SelectCity.java

@WebServlet("/selectcity")
public class SelectCity extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/json;charset=utf-8");
        Long id = new Long(request.getParameter("parentid"));
        List<City> childrenCitys = CityUtils.getChildrenCitys(id);
        JSON json = JSONSerializer.toJSON(childrenCitys);
        System.out.println(json);
        response.getWriter().print(json);
    }
 
}

SelectProvince.java

@WebServlet("/selectprovince")
public class SelectProvince extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/json;charset=utf-8");//设置响应类型
        List<City> parentCitys = CityUtils.getParentCitys();
        //将集合转换为json对象
        JSON json = JSONSerializer.toJSON(parentCitys);
        response.getWriter().print(json);
    }
 
}

provincecity.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
</head>
<body>
    省：<select id="province"></select>
    市：<select id="city"></select>
</body>
<script type="text/javascript">
$(function(){
    $.get("selectprovince",null,function(data){
        //i 索引从0开始，obj==this 代表当前  $(data)—— json数据。
        $(data).each(function(i,obj){
            $("#province").append("<option value='"+obj.id+"'>"+obj.name+"</option>");
        });
    });
    $("#province").change(function(){
        $("#city").empty();
        var data ={"parentid":$("#province option:selected").val()};
        //发请求
        $.get("selectcity",data,function(data){
            $(data).each(function(i,obj) {
                $("#city").append("<option >"+obj.name+"</option>");
            });
        });
         
    });
})
</script>
</html>

esponse是响应，所以输出的是请求的地方，就像ajax，发送请求后会返回数据，而这个
response.getWriter().print（）就类似将得到的数据返回到前端

var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest(); //IE7+,...
}else{
request=new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5

用XHR发送请求：
open(method,url,async) 调用XHR对象，async表示同步还是异步，默认为true(异步)；
send(String)   发送请求。

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //必须写在open和send中间
request.send("name=王大锤&sex=男");

一、xhr取得响应
1、responseText:获得字符串形式的相应数据。
2、responsXML:获得XML形式的相应数据。
3、status和statusText：以数字和文本形式返回http状态码。
4、getAllResponseHeader()：获取所有的响应报头。
5、getResponseHeader()：查询响应中的某个字段的值。
6、readyState属性：响应返回成功的时候得到通知。
（1）0：请求未初始化，open还没有调用。
（2）1：服务器连接已建立，open已经调用了。
（3）2：请求已经接收，也就是接收到头信息了。
（4）3：请求处理中，也就是接收到响应主体了。
（5）4：请求已完成，且响应已就绪，也就是响应完成了。
二、典型的xhr建立ajax的过程。（涵盖了ajax的大部分内容）
1、new一个xhr对象。
2、调用xhr对象的open方法。
3、send一些数据。
4、对服务器的响应过程进行监听，来知道服务器是否正确得做出了响应，接着就可以做一些事情。比如获取服务器响应的内容，在页面上进行呈现。

jquery中的ajax
$.ajax({
        type:"GET",
        url:"service.php?number="+$("#keyword").val(),
        dataType:"json", 预期服务器返回数据的类型
        success:function(data){
           if(data.success){
               $("searchResult").html(data.msg);
           }else{
               $("#searchResult").html("出现错误：" + data.msg);
           }
        },
        error:function(jqXHR){
           aler("发生错误："+ jqXHR.status);
        }
});

get/post请求的区别：

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。

2. 首先是"GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。

3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

get请求和post请求在服务器端的区别:

4. 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

HTTP标准包含这两种方法是为了达到不同的目的。POST用于创建资源，资源的内容会被编入HTTP请示的内容中。例如，处理订货表单、在数据库中加入新数据行等。

当请求无副作用时（如进行搜索），便可使用GET方法；当请求有副作用时（如添加数据行），则用POST方法。一个比较实际的问题是：GET方法可能会产生很长的URL，或许会超过某些浏览器与服务器对URL长度的限制。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
---------------------

会员力量，点亮园子希望

刷新页面返回顶部

缩酒

ajax

1. 传统交互方式的弊端：

2. AJAX交互方式：

3. 什么是ajax

4. 哪些场景需要使用ajax ？

5. 同步和异步

6.ajax学习：

7 Ajax正确写代码流程

8. jquery省市

1. 传统交互方式的弊端：

2. AJAX交互方式：

3. 什么是ajax

4. 哪些场景需要使用ajax ？

5. 同步和异步

6.ajax学习：

7 Ajax正确写代码流程

8. jquery省市

About

8.　jquery省市

8.　jquery省市