Ajax概述

最新推荐文章于 2023-11-21 13:31:26 发布

山有木兮木有枝21

最新推荐文章于 2023-11-21 13:31:26 发布

阅读量86

点赞数

分类专栏： web前端 # js

本文链接：https://blog.csdn.net/weixin_39477501/article/details/104606625

版权

web前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

1. 简介

web程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问，在此之前，让浏览器发出对服务端的请求，获取服务端的数据有以下几种方式，例如地址栏输入地址、回车、刷新、特定元素的href或src属性、表单提交等，这些方案都是我们很难通过代码的方式进行编程（对服务端发出请求并接收服务端返回的响应）。

Ajax（Asynchronous JavaScript and XML）最早出现在2005年的Google Suggest，是在浏览器端进行网络编程（发送请求、接收响应）的技术方案，它使我们可以通过JavaScript直接获取服务端最新的内容而不必重新加载页面，让web更能接近桌面应用的用户体验。简单来说，Ajax就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与响应，实现网络编程。

2. 概览

（1）onreadystatechange事件

xhr.onload = function() {}等价于readyState == 4时xhr.onreadystatechange = function() {}的调用，这是HTML5中提供的XMLHTTPRequest version 2.0 定义的，但可能会有兼容问题。

由于onreadystatechange事件是在xhr对象状态变化时触发（不单是在得到响应时），也就是意味着这个事件会被触发多次，所以需要readyState记录每个状态。

readyState	状态描述	说明
0	unsent	代理（xhr）被创建，但尚未调用open（）方法
1	opened	open（）方法已经被调用，建立了连接
2	headers_received	send（）方法已经被调用，并且已经可以获取状态行和响应头
3	loading	响应头下载中，responseText属性可能已经包含部分数据
4	done	响应体下载完成，可以直接使用responseText

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">

    // Ajax是一套API，核心提供的类型：XMLHTTPRequest
    // 1. 安装浏览器（用户代理），xhr类似于浏览器的作用（发送请求接收响应）
    // 2. 打开浏览器，输入网址
    // 3. 敲回车键，开始请求
    // 4. 等待响应
    // 5. 看结果

    var xhr = new XMLHttpRequest(); 
    // xhr.readyState == 0; 初始化，请求代理对象

    xhr.open('GET', 'http://localhost/time.php'); // 相对定位'./time.php'
    // xhr.readyState == 1, open方法已经调用，建立一个与服务器端特定端口的连接

    xhr.send(); 
    // 因为响应需要时间，所以无法通过返回值的方式返回响应
    // console.log(xhr.send()); // undefined

    // 客户端不知道服务端何时才能返回响应，所以Ajax API采用事件的机制（类似通知）
    // 状态改变触发
    xhr.onreadystatechange = function() { 

        console.log(this.readyState); 
        // this.readyState == 2, 已经接收到了响应报文的响应头
        // 此时this.getAllResponseHeaders()可以获得数据，但还没有拿到体，即this.responseText没有数据

        // this.readyState == 3, 正在下载响应报文的响应体，有可能为空，有可能不完整，在此时处理响应体不可靠
		
        // this.readyState == 4, 下载完成

        // this.status响应状态码，this.statusText响应状态描述，this.responseText文本形式，this.responseXML
        // this.response获得大结果会根据this.responseType改变，this.responseText获取的是字符串形式的响应体
        // this.getResponseHeader('Content-Type')指定响应头，this.getAllResponseHeaders()全部响应头

        if(this.readyState != 4) return;
        console.log(this.responseText);
    }
</script>
</head>
<body>
</body>
</html>

time.php

<?php

echo time();

（2）遵循http

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    var xhr = new XMLHttpRequest();

    xhr.open('POST', './add.php'); // 设置请求行

    xhr.setRequestHeader('Foo', 'Bar'); // 设置一个请求头

    // 一旦请求体是urlencoded格式的内容，需在请求头中设置
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.send('key1=value1&key2=value2'); // 以urlencoded格式设置请求体
</script>
</head>
<body>
</body>
</html>

add.php