此篇为学习笔记

概述

Ajax（Asynchronous Javascrpt And Xml）是一种运用于浏览器的技术，它可以在浏览器与服务器之间使用异步通信机制进行数据通信，从而允许浏览器向服务器获取少量信息而不是刷新整个页面。

首先要明白什么是异步，异步常常和Callback联系在一起，例如你去买包子，老板还没做好，你等着他做好，这是同步；异步就是你不需等待他做好，你可以做其他的事情，而当他做好的时候给你个信号，你去取。

下面为Ajax 的原理图 ;

可以看到最重要的是使用 XMLHttpRequest 这个对象向服务器发送请求。

XMLHttpRequest

先看一下下面这个实例 ：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc()

{

	var xmlhttp;

	if (window.XMLHttpRequest)

	{

		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

		xmlhttp=new XMLHttpRequest();

	}

	else

	{

		// 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","/try/ajax/ajax_info.txt",true);

	xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>

</html>

可以看到不同版本浏览器创建请求对象是不相同的，open 方法写入 url ， send 方法发送请求，而 oncreadystatechange 则是个回调函数，用于“通知”前端页面请求完成的结果。

发送请求

上图是发送请求的参数详解

响应返回

例如这样子 ：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc()

{

  var xmlhttp;

  var txt,x,i;

  if (window.XMLHttpRequest)

  {

    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

    xmlhttp=new XMLHttpRequest();

  }

  else

  {

    // IE6, IE5 浏览器执行代码

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

  }

  xmlhttp.onreadystatechange=function()

  {

    if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

      xmlDoc=xmlhttp.responseXML;

      txt="";

      x=xmlDoc.getElementsByTagName("ARTIST");

      for (i=0;i<x.length;i++)

      {

        txt=txt + x[i].childNodes[0].nodeValue + "<br>";

      }

      document.getElementById("myDiv").innerHTML=txt;

    }

  }

  xmlhttp.open("GET","cd_catalog.xml",true);

  xmlhttp.send();

}

</script>

</head>

<body>

<h2>我收藏的 CD :</h2>

<div id="myDiv"></div>

<button type="button" onclick="loadXMLDoc()">获取我的 CD</button>

</body>

</html>

响应回调

总结

  • Ajax 为异步请求，可以达到不更新整个界面而更新局部的效果
  • Ajax 使用XMLHttpRequest 对象发送请求，发送主要的方法是 open 和 send
  • XMLHttpRequest 利用回调函数来更新界面

参考资料

Ajax 学习（一）的更多相关文章

  1. Ajax学习心得

    Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...

  2. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  3. ajax学习之post请求步骤

    ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...

  4. AJAX学习前奏----JS基础加强

     AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...

  5. AJAX学习必备三本书

    <AJAX基础教程>AJAX必备图书之一.国内发行的第一本AJAX图书,也是目前最好的AJAX入门书,如果您是AJAX新手,此书是最好的入门图书.本书基本包括了实现Ajax需要了解的大部分 ...

  6. AJAX学习2

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本文学习内容:https://www. ...

  7. [学习笔记]AJAX学习

    AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...

  8. AJAX学习小结

    12345678910 $.ajax({ "url":"", //访问路径 "data":"", // 需要传输的数据 ...

  9. Ajax学习笔记demo

    AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...

  10. Ajax学习重点总结

    1.什么是AJAX AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML). AJAX是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...

随机推荐

  1. C# GDI绘制波形图

    直接上效果图如下 public partial class WaveChartUserCtrl : UserControl { Color axisColor = Color.FromArgb(69, ...

  2. 使用客户端软件向服务端php程序发送post数据，php接受三种方法

    方法一:$_POST; 方法二:$GLOBALS['HTTP_RAW_POST_DATA'],需要在php.ini开启 always_populate_raw_post_data = On: 方法三: ...

  3. 在Asp.Net MVC中使用NPOI插件实现对Excel的操作（导入，导出，合并单元格，设置样式，输入公式）

    前言 NPOI 是 POI 项目的.NET版本,它不使用 Office COM 组件,不需要安装 Microsoft Office,目前支持 Office 2003 和 2007 版本. 1.整个Ex ...

  4. pageadmin CMS网站建设教程： 附属表数据列表调用语法

    列表调用语法 Html.SubDataList(参数1,参数2,参数3,参数4)参数说明: 注:第一个参数对象中必须定义Table或ParentTable/ParentField属性.参数1常用属性: ...

  5. 使用过Memcache缓存吗？如果使用过，能够简单描述下其工作原理吗？

    Memcache是把所有数据保存在内存中,采用hash表的方式,每条数据由key和value组成,每个key独一无二的.Memcache采用LRU算法逐渐把过期数据清除掉.

  6. python Udp与Tcp

    一.UDP 首先导入socket 1.客户端 1.创建套接字(socket)udp_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)2 ...

  7. DCL，即Double Check Lock，中卫双重检查锁定。

    DCL,即Double Check Lock,中卫双重检查锁定. [Java并发编程]之十六:深入Java内存模型——happen-before规则及其对DCL的分析(含代码) 关于单例.关于DCL: ...

  8. 如何通过Python暴力破解网站登陆密码

    首先申明,该文章只可以用于交流学习,不可以用于其他用途,否则后果自负. 现在国家对网络安全的管理,越来越严,但是还是有一些不法网站逍遥法外,受限于国内的人力.物力,无法对这些网站进行取缔. 今天演示的 ...

  9. UITableView 的常用可复制代码

    UITableView是使用中最常用的工具,下面列举一个常用的tableview类,以后直接复制代码,稍作修改,就能用了. #import "ViewController.h" @ ...

  10. c malloc分配内存

    php中的内存分配有用类似emalloc这样的函数,emalloc实际上是C语言中的malloc的一层封装,php启动后,会向OS申请一块内存,可以理解为内存池,以后的php分配内存都是在这块内存池中 ...