什么是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. 由delete导致的超时已过期问题

    1. 问题 开发人员反映应用程序中一条简单的delete语句执行报“超时已过期”错误.delete语句形式如下: delete * from table_1 where id=@value 2. 分析 ...

  2. 使用CoreData [1]

    使用CoreData [1] 本篇教程能教你从无开始接触CoreData,包括新建工程,创建出实体,增删改查样样都有,属于使用CoreData最初级教程. 1. 创建带有CoreData的工程项目 2 ...

  3. Hadoop HBase概念学习系列之HBase里的列式数据库（十七）

    列式数据库,从数据存储方式上有别于行式数据库,所有数据按列存取. 行式数据库在做一些列分析时,必须将所有列的信息全部读取出来 而列式数据库由于其是按列存取,因此只需在特定列做I/O即可完成查询与分析, ...

  4. Mycat问题总结

    Mycat问题总结 一丶自增主键设置 Mycat提供了几种设置自增主键的方式 本地文件方式 数据库方式 服务器时间戳方式 分布式ZK-ID生成器 第一种和第二种只适合单点设置,对于集群不适用.第四种方 ...

  5. 4星|《情感驱动》：可口可乐营销VP的案例回顾与经验总结

    情感驱动 作者是西班牙人,1963年出生,可口可乐前营销VP. 作者大学是法律专业,毕业后5年,在西班牙开了一个律师事务所,干了1年后去读MBA.1988年进入宝洁工作,1996年跳槽到可口可乐,辗转 ...

  6. Subversion、TortoiseSVN、Ankhsvn+VS使用

    Subversion为版本控制软件的服务器端.VisualSVN Server 可以在Windows平台安装和管理全功能的Subversion server. TortoiseSVN为Subversi ...

  7. 在web.xml中配置404错误拦截

    <error-page> <error-code>404</error-code> <location>/home.do</location> ...

  8. python邮件处理

    SMTP SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式.Python对SMTP支持有 ...

  9. linux centos 7.5下 源码编译安装 lua环境

    lua 5.3.5 下载安装时发现缺少库 readline 需要添加依赖 yum search readline 看有哪些包 安装带有 devel 字样的 安装无 devel 的非开发包,通常不会自动 ...

  10. regex_search

    在regex_match()里边只能看到regex和输入的字符串是不是全部匹配上了,匹配上了就返回true,否则false.然而他不能返回匹配到的子字符串:regex_search()和regex_m ...