AJAX学习笔记

最新推荐文章于 2024-07-09 15:51:39 发布

蛋挞菌

最新推荐文章于 2024-07-09 15:51:39 发布

阅读量99

点赞数

分类专栏： AJAX 文章标签： ajax

本文链接：https://blog.csdn.net/jing__jun/article/details/107204300

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

无需重新加载整个网页，更新部分网页（异步更新）。
AJAX = 异步 JavaScript 和 XML。
1、AJAX工作原理
第一：浏览器发生某个事件，创建XMLHttpRequest对象，发送HttpRequest到服务器；
第二：服务器处理HttpRequest，创建响应并将数据返回浏览器；
第三：浏览器使用JS处理被返回的数据，更新页面内容。

2、
XMLHttpRequest对象（异步的与服务器交换数据）
Javascript/DOM（信息显示/交互）
CSS（给数据定义样式）
XML（作为转换数据的格式）

3、XMLHttpRequest 对象
用于在后台与服务器交换数据

创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");

应对所有浏览器：
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

4、向服务器发送请求

open(method,url,async)
//method：请求的类型；GET 或 POST
//url：文件在服务器上的位置
//async：true（异步）或 false（同步）
//使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
send(string)
//string：仅用于 POST 请求


xmlhttp.open("GET",".html",true);
xmlhttp.send();

在以下情况中，使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

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

xmlhttp.open("POST",".php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");//在 send() 方法中规定您希望发送的数据

5、服务器响应

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

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

6、XMLHttpRequest对象
XMLHttpRequest 对象的三个重要的属性：

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;
    }
}

附：从XML文件返回数据
来源：https://www.runoob.com/try/try.php?filename=tryajax_xml2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

蛋挞菌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX学习笔记

无需重新加载整个网页，更新部分网页（异步更新）。AJAX = 异步 JavaScript 和 XML。1、AJAX工作原理第一：浏览器发生某个事件，创建XMLHttpRequest对象，发送HttpRequest到服务器；第二：服务器处理HttpRequest，创建响应并将数据返回浏览器；第三：浏览器使用JS处理被返回的数据，更新页面内容。2、XMLHttpRequest对象（异步的与服务器交换数据）Javascript/DOM（信息显示/交互）CSS（给数据定义样式）XML（作为转换数
复制链接

扫一扫