Ajax 学习笔记

Ajax

1 简介

• Ajax：异步的JavaScript 和 XML （ Asynchronous JavaScript and XML）
• 不是一门新的编程语言，而是一种使用现有标准的新方法
• 可以在不更新当前页面的情况下向服务器发出请求
• 无需重新加载整个网页的情况下，能够更新部分网页的技术。

2 技术

• 使用CSS和XHTML来表示。
• 使用DOM模型来交互和动态显示。
• 使用XMLHttpRequest来和服务器进行异步通信。
• 使用javascript来绑定和调用。

3 工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。
并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

4 XMLHttpRequest 对象

4.1 常用属性

• onreadystatechange 属性：存有处理服务器响应的函数。

xmlHttp.onreadystatechange = function() { //我们需要在这写一些代码}

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

状态	描述
0	请求未初始化（在调用open()之前）
1	请求已提出（在调用send()之前）
2	请求已发送（从响应中得到内容头部）
3	请求处理中（响应中有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

function demo() {
            /* 测试xmlhttprequest的响应码 */
            // 创建此对象
            var xhtml = new XMLHttpRequest();
            var val = document.getElementById("username").value;
            document.write("open前readystate的值为："+xhtml.readyState+"<br>");
            // 请求初始化
            xhtml.open("get","http://localhost:8888/DemoAjax/loginservlet?username="+val,true);
            // 发送请求
            document.write("send前readystate的值为："+xhtml.readyState+"<br>");
            xhtml.send(null);

            // 接受响应函数
            xhtml.onreadystatechange = function () {
                if (xhtml.readyState == 4) {
                    window.alert(xhtml.readyState)
                    window.alert(xhtml.responseText);
                } else {
                    window.alert(xhtml.readyState);
                    window.alert("hahahha")
                }
            }
        }

• responseText属性

  可以通过该属性获取从服务其返回来的数据。

  // 接受响应函数
              xhtml.onreadystatechange = function () {
                  if (xhtml.readyState == 4) {
                      window.alert(xhtml.readyState)
                      window.alert(xhtml.responseText);
                  } else {
                      window.alert(xhtml.readyState);
                      window.alert("hahahha")
                  }
              }
  

• 其他 服务器返回响应时，返回到提交页面

  属性	描述
  onreadystatechange	状态改变的事件触发器，通常会调用一个函数
  readyState	请求的状态（0，1，2，3，4）
  responseText	服务器的响应，返回数据的文本
  responseBody	服务器返回的主体（非文本格式）
  responseStream	服务器返回的数据流
  responseXML	服务器返回数据兼容DOM的XML文档，可以解析为一个DOM对象
  status	服务器的HTTP状态码
  statusText	服务器返回的状态文本信息

  4.2 常用方法

1. open(method,url,async) 方法

   open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第二个参数规 定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true);

2. send(string) 方法 string：仅用于post方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

3. get 还是 post？

   与post相比，get更简单也更快，并且在大部分情况下都能使用

   以下情况使用post：

   • 无法使用缓存文件（更新服务器上的文件或数据库）
   • 向服务器发送大量的请求（post没有数据量限制）
   • 发送包含未知字符的输入时，post比get更稳定可靠

4. 使用get请求：请向 url 中添加信息

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

5. post请求：if需要向表单那样post数据，则必须使用setRequestHeader()来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。

因为对于get请求来说，它的值是拼接在地址栏上上的，默认编码是ascll码。对于post请求，数据是在请求体中，所以，必须指定form表单提交的数据类型。
请求的默认编码是："Content-type","application/x-www-form-urlencoded"

  xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Bill&lname=Gates");

6. 异步 true or false ？

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

   XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

     xmlhttp.open("GET","ajax_test.asp",true);
   

   对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

   通过异步，无需等待服务器的响应：

   • 在等待服务器响应时执行其他脚本
   • 当响应就绪后对响应进行处理

   当使用异步时：请规定响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

   xmlhttp.onreadystatechange=function()
     {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
       document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
       }
     }
   xmlhttp.open("GET","test1.txt",true);
   xmlhttp.send();
   

5 ajax 编程步骤

1. 创建XMLHttpRequest对象
2. 设置请求方式
3. 调用回调函数（异步时，设置就绪状态的函数）
4. 发送请求

5.1 创建对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

所以为了应对所有的浏览器，应该检查浏览器是否支持此对象。

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

5.2 设置请求方式

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CkKEOOL8-1604485021088)(C:\Users\12454\AppData\Roaming\Typora\typora-user-images\image-20201027203315743.png)]

5.3 调用回调函数

//第三步：注册回调函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误！");
}
}
}

5.4 发送请求

//第四步：设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" + Math.random();
// 增加time随机参数，防止读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
// 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params); // 数据间用&连接

6 jQuery的Ajax操作

6.1 原生js的不足

• 步骤繁琐
• 方法属性常用值较多，不便于记忆

6.2 ajax()方法

<%--  采用jquery的方式写  --%>
    <script>
        $(function () {
            $("#aa").blur(function () {
                let val = $(this).val();
                $.ajax({
                    url:"/DemoAjax/loginservlet",
                    type:"get", // 默认是get
                    data:"username="+ val,
                    dataType:"text", // 预期的服务器响应数据类型
                    success:function (result) { // result 返回的数据
                        $("#tt").html(result);
                    },
                    error:function () {
                        $("#tt").html("不直到啥原因错误！");
                    }
                })

            });
        });
    </script>

• 语法

$.ajax({name:value, name:value, ... })
// 里面是键值对的形式

• 常见的键与值

键名称	键值
url	规定发送请求的 URL。默认是当前页面。
type	规定请求的类型（GET 或 POST）。
data	规定要发送到服务器的数据。
dataType	预期的服务器响应的数据类型。
contentType	发送数据到服务器时所使用的内容类型（见上面post）
success(result,status,xhr)	当请求成功时运行的函数。
async	布尔值，表示请求是否异步处理。默认是 true。
error(xhr,status,error)	如果请求失败要运行的函数。

6.3 jQuery的get方法

​ 通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。

$.get(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
//url, data, callback, type
});

/* 简便的方式 url data 回调函数 dataType*/
$.get("/DemoAjax/loginservlet","username="+ val,function (result) {
   $("#tt").html(result);},"text");

6.4 jQuery的post()方法

$.post(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});
/* post方法 */
$.post("/DemoAjax/loginservlet","username="+val,function (result) {
$("#tt").html(result);
},"text");