AJAX (Asynchronous JavaScript and Xml)

直译中文 - javascript和XML的异步

同步与异步的区别:
  同步交互
    执行速度相对比较慢
    响应的是完整的HTML页面
  异步交互
    执行速度相对比较快
    响应的是部分数据

Ajax 的核心对象:
  XMLHttpRequest 对象
创建 XMLHttpReuqest 对象

     function getXhr(){
// 声明XMLHttpRequest对象
var xhr = null;
// 根据浏览器的不同情况进行创建
if(window.XMLHttpRequest){
// 表示除IE外的其他浏览器
xhr = new XMLHttpRequest();
}else{
// 表示IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
// 创建核心对象
var xhr = getXhr();

Ajax 核心对象
  属性:    

    * readyState
      * 0 - (服务器端)尚未初始化
      * 1 - (服务器端)正在接收
      * 2 - (服务器端)接收完毕
      * 3 - (服务器端)正在响应
      * 4 - (服务器端)响应完毕
    * status
      * 200 - 请求成功
      * 404 - 网页找不到(请求路径不正确)
      * 500 - 服务器端错误

  方法:
    * open(method,url)方法
      * 作用 - 与服务器端建立连接
      * 参数
        * method - 设置请求类型(GET或POST)
        * url - 设置请求地址
    * send()方法
      * 作用 - 向服务器端发送请求参数

  事件:
    * onreadystatechange事件
      * 作用 - 监听服务器端的通信状态改变

实现Ajax的异步交互步骤
  1. 创建XMLHttpRequest核心对象
    固定写法 - 独立编写
  2. 与服务器端建立连接
    使用XMLHttpRequest对象的open(method,url)方法
      * method - 设置当前请求的类型
      * url - 设置当前请求的地址
  3. 向服务器端发送请求
    使用XMLHttpRequest对象的send(请求参数)方法
      * 请求参数的格式 - key=value
  4. 接收服务器端的响应数据
    * 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
    * 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)
    * 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)
    * 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据

  示例:

     // 实现Ajax的异步交互的步骤

     var btn = document.getElementById("btn");
btn.onclick = function(){
/*
* 1. 实现Ajax主要依靠XMLHttpRequest对象
* * 创建XMLHttpRequest对象
*/
var xhr = getXhr();
/*
* 2. 与服务器端建立连接
* * open(method,url,async)方法
* * method - 设置当前的请求类型(GET或POST)
* * url - 设置当前的请求地址
* * async - 设置是否异步(Boolean类型)
* * 默认值为true,表示异步
* * 官方认为使用XMLHttpRequest对象就是为了实现异步交互的
*/
xhr.open("get","01.php?user=zhangwuji");
/*
* 3. 客户端向服务器端发送请求
* * send(请求参数)方法
* * 请求参数的格式 - key=value
* * 如果请求类型为GET方式的话
* * send()方法是不能向服务器端发送请求数据的
* * 注意
* * send()方法是不能被省略的
* * GET请求类型 - send(NULL);
*/
xhr.send(null);
/*
* 4. 客户端接收服务器端的响应
* * 使用onreadystatechange事件
* * 监听服务器的通信状态
* * readyState属性
* * 得到服务器端当前通信状态
* * 备选项
* * 0 尚未初始化
* * 1 正在接收
* * 2 接收完成
* * 3 正在响应
* * 4 响应完成
* * status - 状态码
* * 200 OK
* * responseText属性
* * 接收服务器端的数据(HTML格式)
*/
xhr.onreadystatechange = function(){
// 保证服务器端响应的数据发送完毕
if(xhr.readyState == 4){
// 保证这次请求必须是成功的
if(xhr.status == 200){
// 接收服务器端的数据
var data = xhr.responseText;
// 测试
console.log(data);
}
}
}
} // 定义创建XMLHttpRequest对象的函数
function getXhr(){
// 声明XMLHttpRequest对象
var xhr = null;
// 根据不同浏览器创建
if(window.XMLHttpRequest){
// 其他浏览器
xhr = new XMLHttpRequest();
}else{
// IE浏览器(8及之前)
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 返回XMLHttpRequest对象
return xhr;
}
<?php
// 用于处理客户端的Ajax异步请求
// 1. 接收客户端发送的请求数据
$user = $_GET['user'];
// 2. 向客户端进行响应
echo $user.' get request succesful.';
?>

GET 与 POST 的区别:
  GET请求类型
    * send()方法不起作用,但是不能被省略
      xhr.send(null);
    * 请求参数 - 添加到URL?key=value
  POST请求类型
    * send()方法起作用
    * 在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

实现Ajax的六步是什么?(不标准)
  1. 创建XMLHttpRequest对象
  2. 建立连接
  3. 发送请求
  4. 注册监听 - onreadystatechange事件
  5. 获取服务器端的通信状态 - readyState
  6. 获取服务器端的状态码

XML 解析

XML 语法
  声明:
    <?xml version="1.0" encoding="UTF-8" ?>
  定义元素:
    * 根元素
      * 必须是起始标签
      * 只能定义一个
    * 定义元素
      * 元素名可以自定义
      * 分类
        * 起始标签或单标签
  定义属性

DOM 解析 XML
  创建 XML 解析器:

         function parseXML(xml){
// 声明解析XML后的DOM对象
var xmlDoc = null;
// 根据不同的浏览器
if(window.DOMParser){
// 其他浏览器
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xml,"application/xml");
}else{
// IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xml);
}
return xmlDoc;
}

    解析 XML 与解析 HTML 一致

      * 很少使用ById和ByName两个方法
    * 注意
      * 浏览器不允许读取外部的XML文件
      * 浏览器解析符合XML格式的字符串

Ajax中的XML格式
  * 请求的数据格式 - XML
    * 客户端如何构建符合XML格式的数据
      * 构建的数据类型 - 字符串(string)类型
      * 字符串的内容符合XML格式的语法要求
    * 服务器端如何接收符合XML格式的数据
      * 接收客户端的请求数据 - 字符串(string)类型
      * PHP集成了DOM的相关内容
        * DOMDocument类
        * DOMElement类
        * DOMNode类

  * 响应的数据格式 - XML

    * 服务器端如何构建符合XML格式的数据
      * 设置服务器端的响应头"Content-Type"值为"text/xml"
      * 构建符合XML格式数据内容
        * 手动方式构建字符串(string)内容
        * DOMDocument对象的方法
          * loadXML(符合XML格式的字符串);
          * saveXML()方法进行响应

    * 客户端如何接收符合XML格式的数据

      * 使用XMLHttpRequest对象的responseXML属性接收
      * 接收回来的就是XML DOM对象(不需要使用XML解析器进行解析)
      * 直接使用DOM解析XML DOM对象即可

  示例:

     /*
* 创建DOM解析XML的解析器 - 目前
* * IE浏览器
* new ActiveXObject("Microsoft.XMLDOM");
* * 其他浏览器
* 创建一个DOM的解析器
* var parser = new DOMParser();
* 使用DOM解析器解析XML文件
* var xmlDoc = parser.parseFromString(xmlFile,"application/xml");
*
* 当前报错:
* * 目前主流浏览器
* * 不允许读取本地文件
* * 不允许读取外部文件
*/
function parseXML(xmlFile){
// 创建解析XML后的DOM对象
var xmlDoc = null;
// 根据不同浏览器进行解析
if(window.DOMParser){
// 其他浏览器
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlFile,"application/xml");
}else{
// IE浏览器
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xmlFile);
}
return xmlDoc;
}
/*
* 测试
* 使用DOM的XML解析器 - 解析符合XML格式的字符串
* <user>
* <name>zhangwuji</name>
* </user>
*/
var xmlDoc = parseXML("<user id='u' name='u'><name>zhangwuji</name></user>");
//console.log(xmlDoc);
/*
* DOM解析XML与解析HTML没有任何区别
* * 注意
* * DOM解析XML使用ById或ByName两个方式
* * 实际开发中只用getElementsByTagName()方法
* * 原因 - 属性值在XML格式中都是有效数据
*/
var userEle = xmlDoc.getElementsByName("u")[0];
console.log(userEle);

  示例:

     var btn = document.getElementById("btn");
btn.onclick = function(){
// 实现Ajax的异步交互
var xhr = getXhr();
xhr.open("post","07.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
* 如何构建符合XML格式的请求数据
* * 注意
* * 请求数据的格式 - key=value 不能改变的
* * 将value值构建成符合XML格式的数据
* * 数据类型 - 字符串(string)
* * 格式符合XML的语法要求
* * 编写注意
* * 定义变量 - 专门构建XML格式的数据
* * 在send()方法进行拼串
*/
var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>";
xhr.send("user="+user);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
// 接收服务器端的响应数据
var xmlDoc = xhr.responseXML;
var nameEle = xmlDoc.getElementsByTagName("name")[0];
var txtEle = nameEle.childNodes[0];
console.log(txtEle.nodeValue);
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
 <?php
// 接收客户端发送的请求数据
$user = $_POST['user'];//符合XML格式要求的string类型
//var_dump($user);
// 创建DOMDocument对象
$doc = new DOMDocument();
// 调用loadXML()方法
$result = $doc->loadXML($user);
//var_dump($doc); // 如何构建符合XML格式的数据
/* 修改响应头的Content-Type值为"text/xml"
header('Content-Type:text/xml');
echo $user;// 符合XML格式的string类型
*/ header('Content-Type:application/xml');
echo $doc->saveXML();
?>

JSON (JavaScript Object Notation) 格式
  JSON 数据格式源于 Javascript (JS原生支持)
  JSON 的结构

    * Array - 数组
    * Object - 对象
    * 支持的数据类型
      * String字符串
      * Number数值
      * Boolean - true|false
      * Object
      * Array
      * null  

  Ajax中的JSON格式
    * 请求格式为JSON

      * 客户端向服务器端发送请求为JSON格式的数据
        * 构建符合JSON格式的字符串
        * 保证定义字符串时,使用单引号(里面使用双引号)
      * 服务器端接收JSON格式的数据
        * 接收客户端的数据
        * 使用json_decode()函数进行解析
          json_decode($json,true)   

   * 响应格式为JSON
      * 服务器端向客户端发送响应为JSON格式的数据
        * 使用json_encode()函数将PHP变量(array)转换成符合JSON格式的字符串
      * 客户端接收JSON格式的数据
        * 使用XMLHttpRequest对象的responseText属性接收
          * 没有responseJSON属性
          * 使用eval()函数进行转换

  示例:

     var btn = document.getElementById("btn");
btn.onclick = function(){
var xhr = getXhr();
xhr.open("post","10.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
* 在客户端如何构建JSON格式
* * 构建符合JSON格式的字符串
*/
var user = '{"name":"zhangwuji","pwd":"123456"}';
xhr.send("user="+user);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var data = xhr.responseText;
/*
* 使用eval()函数进行转换
* * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码)
* * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块
*/
var json = eval("("+data+")");
console.log(json);
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
 <?php
// 接收客户端发送的请求数据
$user = $_POST['user'];
// 就是一个JSON格式的string字符串
//var_dump($user); $json_user = json_decode($user,true); //var_dump($json_user['name']); $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
//var_dump(json_decode($json)); // 响应数据符合JSON格式的字符串
// 1. 手工方式构建
//echo '{"name":"zhouzhiruo","pwd":"123456"}'; // 2. 使用json_encode()函数
echo json_encode($json_user);
?>

HTML(文本格式)、XML格式及JSON格式的优缺点
  * HTML格式
    * 优点 - 简单
    * 缺点 - 解析复杂
  * XML格式
    * 优点 - 易于构建复杂数据
    * 缺点 - 构建、解析复杂
  * JSON格式
    * 优点 - 轻量级
    * 缺点 - 可能转换失败

AJAX 异步交互基本总结的更多相关文章

  1. spring mvc 和ajax异步交互完整实例

    Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; cha ...

  2. Ajax异步交互基础

    1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...

  3. Ajax异步交互 [异步对象连接服务器]

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>X ...

  4. Ajax异步交互

    一.简介 Ajax(Asynchronous JavaScript and XML).一般都写为Ajax. Ajax是与服务器交换数组并更新部分网页的艺术.最初的使用时2005中Google Sugg ...

  5. ajax 异步交互

    <script>     $(function(){         $("#sub").click(function () {             $.ajax( ...

  6. 实现AJAX的异步交互的步骤

    <input type="button" value="异步请求"id="btn"> <script> 实现ajax ...

  7. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  8. 原生Ajax实现异步交互

    实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...

  9. 关于AJAX 的交互模型、交互流程及代码示范

    AJAX  = 异步JavaScript + XML. 它是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...

随机推荐

  1. TYVJ1038 忠诚

    hzw学长博客里的2048,根本停不下来! 描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要 求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意. ...

  2. Windows Management Instrumentation WMI Security Technology Learning

    目录 . 引言 . WMI(Windows Management Instrumentation)简介 . 基于WMI的攻击向量 . WMI编程示例 0. 引言 在进行服务器主机的入侵检测.安全攻防的 ...

  3. udp内网穿透 两个内网互联

    1,在有外网ip的机器上启动server. package udp; import java.net.DatagramPacket; import java.net.InetSocketAddress ...

  4. Android学习笔记03-搭建Win8下的Android开发环境

    一  配置环境变量 (绿色文字标出代码,路径换为自己的SDK路径) ANDROID_HOME =  C:\software\adt-bundle-windows-x86_64-20140702\sdk ...

  5. java中静态属性和和静态方法的继承问题 以及多态的实质

    首先结论是:java中静态属性和和静态方法可以被继承,但是没有被重写(overwrite)而是被隐藏. 静态方法和属性是属于类的,调用的时候直接通过类名.方法名完成的,不需继承机制就可以调用如果子类里 ...

  6. easyui datagrid 通过复选框删除新追加的数据问题

    之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...

  7. 分子量 (Molar Mass,ACM/ICPC Seoul 2007,UVa 1586)

    解题思路: 1.将分子量用double 数组记录下来 2.将字符串存储在字符数组中,从头向后扫描,一直记住“字母”,对下一个字符进行判断,是否是数字,如果是数字:用一个整数记录,本代码中用的sum,同 ...

  8. PHP文件包含漏洞剖析

    一. 什么才是”远程文件包含漏洞”?回答是:服务器通过php的特性(函数)去包含任意文件时,由于要包含的这个文件来源过滤不严,从而可以去包含一个恶意文件,而我们可以构造这个恶意文件来达到邪恶的目的. ...

  9. Linux SSH安全策略限制IP登录方法(转)

    本文介绍了Linux SSH安全策略限制IP登录的两种方法.具体如下: 方法一: 首先需要限制登录的ip(或者如果需要自己本地登录,查看最后登录ip即可) Vim /etc/hosts.allow 输 ...

  10. Android Studio 的安装和配置篇(Windows篇)

    上一篇介绍完了Android Studio,这一篇就专门来讲讲怎么安装配置的吧. 其实好多人都卡到安装配置这一步,想当初我也是,万恶的XX防火墙,导致下载Android Studio 的gradle异 ...