zoukankan      html  css  js  c++  java
  • ajax

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

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

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

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

     

    2. AJAX交互方式:

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

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

     

    3. 什么是ajax

     

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

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

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

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

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

    1. 视频网站
    2. 股票网站(轮询)

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

     

     5. 同步和异步

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

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

    6.ajax学习:

     1:一个事件 onreadystatechange

     22个状态  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:文件在服务器上的位置

      asynctrue(异步),false(同步)

     

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

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

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

      向请求添加 HTTP 头。

      header: 规定头的名称

      value: 规定头的值

      注意:该方法必须在opensend之间调用;

      原因:

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

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

    Ajax正确写代码流程

    Ajax检查用户名是否重复

    register.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    @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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!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<-->请求/响应<-->服务器

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

     

    3. 什么是ajax

     

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

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

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

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

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

    1. 视频网站
    2. 股票网站(轮询)

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

     

     5. 同步和异步

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

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

    6.ajax学习:

     1:一个事件 onreadystatechange

     22个状态  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:文件在服务器上的位置

      asynctrue(异步),false(同步)

     

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

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

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

      向请求添加 HTTP 头。

      header: 规定头的名称

      value: 规定头的值

      注意:该方法必须在opensend之间调用;

      原因:

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

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

    Ajax正确写代码流程

    Ajax检查用户名是否重复

    register.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    @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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!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 更稳定也更可靠
    ---------------------

  • 相关阅读:
    No binary for PhantomJS browser on your platform. Please, set "PHANTOMJS_BIN"
    用MeanJS和Yeoman生成器生成【翻译】
    Angular中在前后端分离模式下实现权限控制
    HierarchyId 与.Net Framework 4.5.3报错
    AngularUI Router 概要【转】
    SpecFlow使用入门【转】
    使用AutoMapper实现Dto和Model的自由转换(下)【转】
    使用AutoMapper实现Dto和Model的自由转换(中)【转】
    使用AutoMapper实现Dto和Model的自由转换(上)【转】
    有jQuery背景,该如何用AngularJS编程思想?
  • 原文地址:https://www.cnblogs.com/wzscom/p/10558180.html
Copyright © 2011-2022 走看看