Ajax基础

最新推荐文章于 2024-09-13 15:19:32 发布

槐序&清和

最新推荐文章于 2024-09-13 15:19:32 发布

阅读量139

点赞数 1

分类专栏：笔记文章标签： ajax js javascript

本文链接：https://blog.csdn.net/death_of_King/article/details/108062719

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax基础

工作原理

在这里插入图片描述

概述

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
增加B/S的体验性

XHR创建和请求

XHR创建对象

//IE7+
var xmlhttp = new XMLHttpRequest();

XHR请求
```
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
```
方法描述
open(method,url,async) method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string) string：仅用于 POST 请求

方法	描述
open(method,url,async)	method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	string：仅用于 POST 请求

POST请求

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

异步请求

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

同步请求

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

服务器响应

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

//responseText 属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

//responseXML 属性
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

XHR readyState

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

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

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