学习AJAX,作为一个学习笔记

2019-11-07  本文已影响0人  jiajia5

首先,我们应该知道,什么是AJAX;

w3cschool上是这样解释的:

AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

AJAX全名是AsynchronousJavaScript+XML,AJAX是对于首字母的缩写;虽然名字中包含了xml,但是AJAX这项传输信息的技术,和数据的格式无关;
AJAX通俗的讲就是一种可以在不刷新整个页面的基础上,对页面上部分内容进行更新的技术,做到局部更新;

如何使用AJAX;

1、首先,我们要创建一个XMLHttpRequest对象,要想使用AJAX,就必须通过构造函数创建:

var xhr = new XMLHttpRequest();

如果你需要兼容IE7之前的版本则需要:
用下面这个命令:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

合起来可以这么写:

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

2、初始化AJAX之后,我们第一个要调用的方法就是open(),这个方法接收3个参数;

xmlhttp.open("POST", "exapmle.php", true);

在这个open方法中,我使用了'POST'作为请求类型,"exapmle.php"作为url,采用的是异步;
在页面加载到这行代码时,会启动一个exapmle.php的POST请求;需要注意的是,open方法只是作为一个启动项,而不是发送项,只是为了后面的send()方法作准备;

这里的send()方法可以传入一个参数,GET请求不需要参数,POST请求需要把body部分以字符串或者FormData对象传进去;

4、在我们用send方法进行发送后,服务器会返回xmlhttp.state作为返回的状态,当返回的值为200时,为接收成功,

还有明天继续写

在这里,我是使用了"POST"作为请求类型,在使用post这个请求类型时,我们需要注意的是:

上一篇 下一篇

猜你喜欢

热点阅读