AJAX请求

什么是AJAX请求:AJAX即“Asynchronous Javascript And Xml”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

  ajax是一种浏览器通过js异步发起请求,局部更新页面的技术。

  AJAX请求的局部更新,浏览器地址栏不会发生变化,局部更新不会舍弃原来页面的内容!

JavaScript原生Ajax请求:

  原生的Ajax请求:

    1.我们首先要创建XMLHttpRequest对象

    2.调用open方法设置请求参数

    3.调用send方法发送请求

    4.在send方法前绑定onreadystatechange时间,处理请求完成后的操作

原生AJAX请求的示例:

  创建一个html页面,发起请求:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            //在这里使用javaScript语言发起Ajax请求,访问服务器AjaxServlet中javaScriptAjax
            function ajaxRequest() {
//                 1、我们首先要创建XMLHttpRequest 
                var xmlhttprequest = new XMLHttpRequest();
//                 2、调用open方法设置请求参数
                xmlhttprequest.open("GET","http://lovalhost:8089/16_JSON/ajaxServlet?action=javaScriptAjax",true);
//                4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
                xmlhttprequest.onreadystatechange = function () {
                    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
                    var jsonObj =     JSON.parse(xmlhttprequest.responseText);

                        //把响应的数据显示在页面上
                        document.getElementById("div01").innerHTML = "编号"+jsonObj.id+"姓名"+jsonObj.name;

                    }
                }
//                 3、调用send方法发送请求
                xmlhttprequest.send();



            }
        </script>
    </head>
    <body>    
        <button onclick="ajaxRequest()">ajax request</button>
        <div id="div01">
        </div>
    </body>
</html>

 

 jQuery中的AJAX请求:

  $.ajax方法

    url     表示请求的地址

    type    表示请求的类型GET或POST请求

    data    表示发送给服务器的数据

      格式有两种:

          一:name=value&name-value

          二:{key:value}

    success  请求成功,响应的回调函数

    dataType  响应的数据类型

            常用的数据类型有:

              text    表示纯文本

              xml    表示xml数据

              json    表示json对象

 

 

下面的方法必须遵守参数的顺序
    $.get 请求和$.post 请求
      url:       请求的 URL 地址
      data:       待发送 Key/value 参数。
      callback:      载入成功时回调函数。
      type:       返回内容格式,xml, html, script, json, text。
 

 

 

    Jquery 的$.getJSON方法
      url:         待载入页面的 URL 地址“玩转”Java 系列
      data:      待发送 Key/value 参数。
      callback:     载入成功时回调函数。

 

     表单序列化seriallze()

      seriallze()可以把表单中所有表单项的内容都获取到,并以name=value&name=value的形式进行拼接。

posted @ 2021-11-23 21:23  Soleili  阅读(3142)  评论(0编辑  收藏  举报