AJAX笔记

一、基础概念

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页(局部刷新)

XMLHttpRequest 用于在后台与服务器交换数据。

二、相关api

1.识别浏览器并创建对象:

2.向服务器发送请求:

open(method,url,async)：

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

3.ReadyState:

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

readyState: 存有 XMLHttpRequest 的状态。readyState为4时，表示请求已完成，且响应已就绪

status: 200表示 "OK" 404表示未找到页面

 if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

    }

比较原始的写法，如下所示：

<html>
<script language="JavaScript">
    var xmlHttp;                                    //ajax核心对象
    function createXmlReques() {
        if(window.XMLHttpRequest) {                  //判断当前的浏览器类型
            xmlHttp=new XMLHttpRequest();            //表示使用的是firefox内核
        }else {                                      //表示使用的是ie内核的浏览器
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
        }
    }
    function showBookMsg() {
        createXmlHttp();
        xmlHttp.open("POST","brrow.html");          //设置请求
        xmlHttp.onreadystatechange=showBookMsgCallBack();   //设置请求完成之后处理的回调函数
        xmlHttp.send(null);                         //发送请求
    }
    function showBookMsgCallBack() {                //定义回调函数
        if(xmlHttp.readyState==4) {                //数据返回完毕
            if (xmlHttp.status == 200) {            //HTTP操作正常
                      var text=xmlHttp.responseText;   //接收返回的内容
                      document.getElementById("msg").innerHtml=text;    //设置要显示的内容
            }
        }
    }
</script>
<body> 
<div id="msg"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="showBookMsg()">通过 AJAX 改变内容</button>

</body>
</html>

三、在jQuery中的ajax

其中的ajax具体含义如下：

  $.ajax({
                type:"POST",                    //请求的类型
                url:"/user/searchUser",             //请求的路径
                data: {id: $("#id").val() },            //提交的数据
                dataType:"json" ,                       //返回的数据类型
                success: function (msg) {    //请求成功触发的方法。此处的参数msg，表示请求成功后服务器返回的数据。
                     //修改id和年龄
                    console.log(msg.userName +"、"+msg.age);
                    $("#name").html(msg.userName);
                    $("#age").html(msg.age);
                },
                error:function () {                     //请求失败触发的方法
                    alert("数据请求失败");
                }
            }

示例代码如下所示：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/jquery/jquery-3.2.1.js"></script>
</head>
<script type="text/javascript">
   $(document).ready( function () {
       $("#search").click(function () {
           console.log("ajax")
            $.ajax({
                type:"POST",
                url:"/user/searchUser",
                data: {id: $("#id").val() },
                dataType:"json" ,
                success: function (msg) {
                     //修改id和年龄
                    console.log(msg.userName +"、"+msg.age);
                    $("#name").html(msg.userName);
                    $("#age").html(msg.age);
                },
                error:function () {
                    alert("数据请求失败");
                }
            })
       })
     }
   );

</script>
<body>
     通过ajax异常刷新用户数据:<br>
     id:  <input type="text" id="id"/>  <br>
     <input type="button" id="search" value="点击搜索"/> <br>
     姓名: <p id="name"></p> <br>
     年龄: <p id="age"></p> <br>

</body>
</html>