AJAX（异步js和xml）(用于创建快速动态网页的技术）基础

发送ajax的使用方式： 原生 jQuery fetch axios

AJAX工作原理

原传输，用xml代码

                （HTML与XML区别）

                HTML用来呈现数据。里全是预定义标签

                xml用来存储和传输数据。中没有预定义标签，全是自定义标签

现用JSON，相对于XML更简洁，数据转换更容易

 

AJAX特点

优点：

1.可以无需刷新页面与服务器端进行通信

2.允许你根据用户时间来更新部分页面内容

 

缺点：

1.没有浏览历史，不能回退

2.存在跨域问题（同源）

3.SEO（搜索引擎优化）不友好

HTTP协议（超文本传输协议）

详细规定了浏览器和万维网服务器之间相互通信的规则

 

创建XML HttpRequest对象

代码实现

var xmlhttp;

if (window.XMLHttpRequest) {

    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 

    xmlhttp=new XMLHttpRequest(); 
} else { 
    // IE6, IE5 浏览器执行代码 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }

如要向服务器发请求，我们使用XML HttpRequest对象的open()和send()方法

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

 

XHR请求

 GET请求

（基础的GET请求）

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

（通过GET发送信息是，要向URL中添加信息）

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

get请求实现案例

 

 

 

POST请求

（基础的POST请求）

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

如需像HTML表单那样POST数据，则要使用setRequestHeader()来添加HTTP头，然后在send（）方法中规定想要发送的数据

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

注：setRequestHeader()方法

 

url  -服务器上的文件

open（）方法的url参数是服务器上文件的地址

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

 

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

(下图还没有很懂)

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

XMLHttpRequest 对象的三个重要的属性

 当 readyState 等于 4 且状态为 200 时，表示响应已就绪

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

 注： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

 

回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}