关于AJAX基础

最新推荐文章于 2024-09-03 01:23:13 发布

Eternal_tyq

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量230

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Eternal_tyq/article/details/79626977

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

AJAX全称为：Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML。

顺便补充一下关于XML的知识

XML全称为：EXtensible Markup Language，即可扩展标记语言，它可以简化数据的存储和共享，通常用来传输和存储数据，与HTML相比，HTML被用来显示数据，而XML用来传输数据。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是一种与服务器交换数据并更新部分网页但不重新加载整个页面的技术。下面就介绍如何使用AJAX技术：

1.创建XMLHttpRequest对象

语法：var xmlhttp=new XMLHttpRequest();

在此需要注意一下以上方法只适用于IE7+、Firefox、Chrome、Safari 以及 Opera等现代浏览器，而IE5、IE6并不支持。

所以为了处理兼容问题，我们采用以下处理兼容的写法

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

2.向服务器发送请求的方法：open()和send()方法。

（1）open（）方法

规定请求的类型、URL、异步还是同步

语法：open（method，url，true/false）

method-----请求的类型，get或者post

url----文件在服务器上的位置

true/false----true为异步，false为同步

（2）send（）方法

将请求发送到服务器

3.服务器响应

responseText属性----获得字符串形式的响应数据

responseXML属性----获得XML形式的数据响应

4.AJAX中的onreadystatechange事件

onreadystatechange是一个函数，在readyState属性改变时就会调用该函数。

readyState是存有XMLHttpRequest的状态，其值在0-4之间变化。

0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成且响应已就绪

status是XMLHttpRequest的状态，其值有两个：200和404

200	OK，找到页面
404	未找到页面

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

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       //此处写完成响应后要执行的事情
    }
  }

最后，举个例子，假如通过点击改变页面的值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>点击按钮请求内容</title>
    <script>
        function LoadXMLDoc(){

            var xmlhttp;
            if(window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange= function () {
                if(xmlhttp.readyState==4&&xmlhttp.status==200)
                {
                    document.getElementById("content").innerHTML=xmlhttp.responseText
                }
            }
            xmlhttp.open("get","content.txt",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
<div id="content"><h1>AJAX简介</h1></div>
<button οnclick="LoadXMLDoc()">点击</button>
</body>
</html>