AJAX 入门

前端之家收集整理的这篇文章主要介绍了AJAX 入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、 什么是 AJAX ?

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

二、 创建 XMLHttpRequest 对象

  • XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象。
  • XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

2.1创建 XMLHttpRequest 对象的语法:

  • variable=new XMLHttpRequest();

2.2向服务器发送请求

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

  • xmlhttp.open(“GET”,”test1.txt”,true);
  • xmlhttp.send();
  • XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
    xmlhttp.open(“GET”,”ajax_test.asp”,true);

三、 服务器响应

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

  • responseText :获得(非XML)字符串形式的响应数据。
  • responseXML : 获得 XML 形式的响应数据。

四、 onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性

五、使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数函数。 如果网站上存在多个 AJAX 任务,那么应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用函数。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同)。

猜你在找的Ajax相关文章