什么是Ajax

　　Ajax被认为是(Asynchronous JavaScript and XML的缩写）。异步的js和xml

　　异步和同步：同步->类似打电话，接完一个再接下一个；异步：->类似短信，可以接收多条短信，不会由于一条短信来了而停止接收另外一条短信。

　　现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.即无刷新的与服务器的通信。

　　典型应用就是搜索框的应用

　　Ajax与服务器端语言无关。

　　不用刷新整个页面便可与服务器通讯的办法：

　　　　Flash

　　　　Java applet

　　　　框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面 隐藏的iframe

　　　　XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。

　　　　　　实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词，使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取

　　　　　　发送请求，读取结果等都是通过此对象

　　大致过程：前台（xhtml js等） —— 传输(协议:xmlhttp;格式xml,json等）—— 服务器（php,jsp等）

 XMLHttpRequest概述

　　XMLHttpRequest 作为一个对象，我们对一个 对象首要的了解是了解它的一些属性和方法

　　　　　　属性：

onreadystatechange

每个状态改变时都会触发这个事件处理程序，通常会调用一个JavaScript函数

readyState

请求的状态（0.1.2.3.4）

responseText

服务器的响应，表示为一个串

responseXML

服务器的响应，表示为XML，这个对象可以解析为一个DOM对象

status

服务器的HTTP状态

statusText

HTTP状态的对应文本

　　　　　　方法：

abort()

停止当前请求

getAllResponseHeaders()

把HTTP请求的所有相应首部作为键/值对返回。

getResponseHeader("header")

返回指定首部的串值。

open("method","url")

建立对服务器的调用。method参数可以是GET、POST或PUT等；url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。

send(content)

向服务器发送请求。

setRequestHeader("header","value")

把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()方法。

　　XMLHttpRequest对象的创建

　　　　（为了高效省时，可以将对象的创建作为一个函数以便复用，以下不做详尽的兼容处理）

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

  }

　　利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分：

　　　　onreadystatechange 事件处理函数

　　　　open 方法

　　　　send 方法

　　HelloWorld实例：(发post请求作了解，此处不作演示)

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

window.onload=function(){

    //1.获取a节点，并为其添加onclick响应函数

    document.getElementsByTagName("a")[0].onclick=function(){

         //3.创建一个XMLHttpRequest对象

         var xmlhttp = new XMLHttpRequest();

         //4.准备发送请求的数据：url

         var url=this.href +"?time="+new Date();

         var method="GET";

         //var method="POST"

         //5.调用xmlhttprequest对象的open方法

         xmlhttp.open(method,url);

         //request.setRequestHeader("ContentType","application/x-www-form-urlencoded");

         //6.调用xmlhttprequest对象的send方法

         xmlhttp.send(null);

         //request.send("name='aaa'");

         //7.为xmlhttprequest对象添加onreadystatechange响应函数

         xmlhttp.onreadystatechange=function(){

            //8.决断响应是否完成：xmlhttprequest对象的readystate属性值为4

             if(xmlhttp.readyState==4){

                //9.再决断响应是否可用：xmlhttprequest对象status属性值为200

                 if(xmlhttp.status==200){

                    //10.打印响应结果：responseText

                    alert(xmlhttp.responseText);

                 }

             }

         }

         //2.取消a节点的默认行为

         return false;

    }

}

</script>

</head>

<body>

    <a href="helloAjax.txt">helloAjax</a>

</body>

</html>

　　　　Ajax数据格式之 HTML

　　　　　　  HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中。

　　　　　　不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。

　　　　　　插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。

　　　　一定要注意写js时尤其是循环等时注意别手抖写成int i = 0;需要写成var i = 0!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>People at Clearleft</title>

  <style type="text/css">

      @import url("clearleft.css");

  </style>

  <script type="text/javascript">

      window.onload = function(){

          var aNodes = document.getElementsByTagName("a");

          for(var i = 0;i<aNodes.length;i++){

              aNodes[i].onclick = function(){

                  var request = new XMLHttpRequest();

                  var method = "GET";

                  var url = this.href;

                  request.open(method,url);

                  request.send(null);

                  request.onreadystatechange = function(){

                      if(request.readyState == 4){

                          if(request.status == 200 || request.status == 304){

                              document.getElementById("details").innerHTML = request.responseText;

                          }

                      }

                  }

                  return false;

              }

          }

      }

  </script>

</head>

<body>

  <h1>People</h1>

  <ul>

    <li>

      <a href="files/andy.html">Andy</a>

    </li>

    <li>

      <a href="files/andy.html">Richard</a>

    </li>

    <li>

      <a href="files/andy.html">Jeremy</a>

    </li>

  </ul>

  <div id="details"></div>

</body>

</html>

　　//缺点：若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适

　　　　Ajax数据格式之 XML

　　　　　　此处不作赘述，略显麻烦，仅贴出部分代码

//结果为xml，所以需要使用responseXML

                              var result = request.responseXML;

                              //xml不能直接使用，需要先创建节点再加入

                              var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;

                              var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;

                              var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;

　　　　Ajax数据格式之 JSON

　　　　　　什么是JSON

　　　　　　  JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。

　　　　　　JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

　　　　　　JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。

　　　　　　一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

　　　　　　更轻巧，但易读性稍差。eval()函数存在风险。

　　　　　　JSON的格式请参见 http://www.cnblogs.com/SkySoot/archive/2012/04/17/2453010.html

　　　　　　如何解析JSON

　　　　　　JSON 只是一种文本字符串。它被存储在 responseText 属性中

　　　　　　为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。

　　　　　　函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。

　　　　　　因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的

　　　　　　JSON提供了json.js包，下载http://www.json.org/json.js后，使用parseJSON()方法将字符串解析成 JS 对象

Ajax第一天——入门与基本概念的更多相关文章

  1. maven第一天——入门与基本概念

    一.什么是maven? 1.概述 核心点:项目构建.依赖管理.[更新]:源码关联 (如何关联源码:在依赖的jar上右击 maven download source即可) Maven是一个项目管理和综合 ...

  2. Flink入门-第一篇：Flink基础概念以及竞品对比

    Flink入门-第一篇:Flink基础概念以及竞品对比 Flink介绍 截止2021年10月Flink最新的稳定版本已经发展到1.14.0 Flink起源于一个名为Stratosphere的研究项目主 ...

  3. .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来,首先,请允许我长吸一口气!真没想到一份来自28岁老程序员 ...

  4. net core体系-web应用程序-4asp.net core2.0 项目实战（CMS）-第一章 入门篇-开篇及总体规划

    .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划   原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来 ...

  5. 第一篇 入门必备 (Android学习笔记)

    第一篇 入门必备 第1章 初识Android 第2章 搭建你的开发环境 第3章 创建第一个程序--HelloWorld 第4章 使用Android工具   ●Android之父 Android安迪·罗 ...

  6. JavaScript入门几个概念

    JavaScript入门几个概念 刚刚入门JavaScript的时候,搞懂DOM.BOM以及它们的对象document和window很有必要. DOM是为了操作文档出现的API,document是它的 ...

  7. 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳

    学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 ...

  8. PRML读书会第一章 Introduction(机器学习基本概念、学习理论、模型选择、维灾等)

    主讲人 常象宇 大家好,我是likrain,本来我和网神说的是我可以作为机动,大家不想讲哪里我可以试试,结果大家不想讲第一章.估计都是大神觉得第一章比较简单,所以就由我来吧.我的背景是统计与数学,稍懂 ...

  9. Python第一天——入门Python(1)数据定义

    数据类型: 什么是数据? 在计算机科学中,数据是指所有能输入到计算机并被计算机程序处理的符号的介质的总称,是用于输入电子计算机进行处理,具有一定意义的数字字母.符号和模拟量等的统称.现在计算机存储和处 ...

随机推荐

  1. 使用 CLI 创建 Azure VM 的自定义映像

    自定义映像类似于应用商店映像,不同的是自定义映像的创建者是你自己. 自定义映像可用于启动配置,例如预加载应用程序.应用程序配置和其他 OS 配置. 在本教程中,你将创建自己的 Azure 虚拟机自定义 ...

  2. 设置Office 365邮箱默认发送和接收邮件大小限制

    Office 365默认的 35MB 的邮件大小限制.Office 365 最大是支持 150MB 的邮件体积的. 我们只需用 Windows Powershell 连接 Office 365 ,然后 ...

  3. Elasticsearch部分节点不能发现集群(脑裂)问题处理

    **现象描述** es1,es2,es3三台es组成一个集群,集群状态正常, 当es1 服务器重启后,es1不能加到集群中,自己选举自己为master,这就产生了es集群中所谓的“脑裂” , 把es1 ...

  4. Linux ntpdate命令详解

    ntpdate命令用于同步更新互联网时间,或者NTP服务器时间 NTP服务器[Network Time Protocol(NTP)]是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源 ...

  5. ZT 二叉树先序，中序，后序遍历非递归实现

    二叉树先序,中序,后序遍历非递归实现 分类: 数据结构及算法2012-04-28 14:30 8572人阅读 评论(6) 收藏 举报 structc 利用栈实现二叉树的先序,中序,后序遍历的非递归操作 ...

  6. if 条件为假(不成立),对应的语句块不会执行. 然后往下走

    if  的条件为真,则执行语句块. 如果条件不真,则执行后面的语句块, 即  : if False: print("卡卡卡") # 前面的if条件是False,提示"un ...

  7. 【教程】【FLEX】#006 控件位置的拖动

    上一篇笔记学习了怎么从 把一个控件拖放到另外一个控件里面(即 A --> B里面). 而现在呢,则是学习  怎么把 A 拖到另外一个位置. (A -->A位置改变): 先说一下实现的思路( ...

  8. 【Alpha】Daily Scrum Meeting 集合贴

    coding:https://git.coding.net/hmCoding/LearnTGP.git 11月14日:http://www.cnblogs.com/polk-blogs/p/78270 ...

  9. 项目属性的target platform和target platform version到底是什么（vs2015开发windows驱动小记）

    根据官方对属性页的介绍(General Property Page (Project))可了解: target platform是build后的结果会跑在哪个平台,例如windows,android, ...

  10. BZ4326 运输计划

    Time Limit: 30 Sec Memory Limit: 128 MB Submit: 2132 Solved: 1372 Description 公元 2044 年,人类进入了宇宙纪元.L ...