JavaScript学习---ajax学习记录20180925

最新推荐文章于 2024-10-06 15:51:50 发布

MichaelGzy

最新推荐文章于 2024-10-06 15:51:50 发布

阅读量174

点赞数

分类专栏：前端 ajax 前端 JS 文章标签： ajax 自学 JavaScript

本文链接：https://blog.csdn.net/qq_42949954/article/details/82845722

版权

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

4 篇文章 0 订阅

订阅专栏

前端 ajax

2 篇文章 0 订阅

订阅专栏

引题

JavaScript的学习路线主要有几部分
1.HTML +css 这个是网页的基础可以做出一个网页的样子出来
html
2.学习javascript，首先要学习的是一些基础，比如数据类型，控制流程语句，数组，函数等等。
3.在高一点的学习阶段，学习bom，dom，事件等这些，比基础高一点的东西。
4.第四步，就要学习ajax，jqury,json。
学习完这些并不意味着你已经掌握了JavaScript，还需要实践去检验和砸实基本功底

那么今天就重点来学习 ajax

网上有很多教程，今天我们来以 w3school网站为收获对象，get 我们想要了解的内容。

正文

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
原来AJAX 是这几个英文的缩写，哈哈哈

那么他有什么特殊之处呢？让我们一起来探索发现吧

特殊之处是：意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

这就可以理解他的产生的目的了~~如果不能局部加载，而是全部重新加载，那么会造成浪费资源，用户体验差，尤其在网站内容比较大，加载时间长的页面让人深有体会（个人理解）

________________________________________________________________________________

我们先记住一句话：“XMLHttpRequest 是 AJAX 的基础。”
XHR 创建对象，发送请求，响应，readystate。我们来逐一了解一下。

首先，XHR
1.创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
//(这个是手动输入，为了记住这句话)
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：自己去补习知识点吧，这里不多介绍。

2.向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

send(string)	将请求发送到服务器。 string：仅用于 POST 请求

比如：
一个简单的 GET 请求：

xmlhttp.open(“GET”,“demo_get.asp”,true);
xmlhttp.send();

举例：看懂一下内容

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

AJAX
|请求数据|←点击显示如下：
你好，Bill Gates，今天过得怎么样？

3.服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

比如上个案例中的 responseText 属性便是指的这个 XMLHttpRequest 响应服务器的属性之一（txt）

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("title");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>

<body>

<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
 
</body>
</html>

以上可以理解为，在一个拥有按钮、具有 onclick事件响应的html页面，放置一个DIV，用于显示XMLHttpRequest响应，遍历book.xml ，将结果加到变量txt (带有换行属性)并输出到DIV 中。

这是一个数据库，名字为：book.xml

<!--   Copyright w3school.com.cn  -->
<!--  W3School.com.cn bookstore example  -->
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>

4.AJAX - onreadystatechange 事件

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

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

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

下面是 XMLHttpRequest 对象的三个重要的属性：

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