AJAX 工作过程
(1) 创建对象(需要处理兼容性问题)
创建XMLHttpRequest对象(创建一个异步调用对象)
<!-- ie6以上 -->
var xhr = new XMLHttpRequest();
<!-- ie6及以下 -->
var oAjax = new ActiveXObject("Microsoft.XMLHTTP")
     // 兼容性处理
     try{
      var xhr = newXMLHttpRequest();
     }catch(e){
      var xhr = newActiveXObject("Microsoft.XMLHTTP");
     }
(2) 连接服务器
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息(get或post、url、同步或异步,默认异步为true)
xhr.open("get/post","1.php?username=Jack&age=12",true);
(3) 发送HTTP请求
xhr.send();
(4) 设置响应HTTP请求状态变化的函数
oAjax.onreadystatechange = function(){ //当请求状态改变时要调用的事件函数 }
(5) 获取异步调用返回的数据
xhr.onreadystatechange = function(){
if(xhr.readyStat e== 4 && xhr.status == 200){
<!-- responseText就是返回的数据 -->
alert(xhr.responseText);
}
}
(6) 使用JavaScript和DOM实现局部刷新
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("myId").innerHTML=xhr.responseText;
}
}
AJAX 的缺点:
1、ajax 不支持浏览器 back 按钮。
2、ajax 存在安全性问题,暴露了与服务器交互的细节。
3、ajax 对搜索引擎的支持比较弱。
 

AJAX 过程总结的更多相关文章

  1. 用Promise对象封装JQuery的AJAX过程

    let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...

  2. Ajax过程

    http://www.cnblogs.com/daicunya/p/6227550.html 1.创建XMLHttpRequest对象,也就是创建一个异步调用对象. 2.创建一个新的HTTP请求,并指 ...

  3. 用js写个原生的ajax过程

    var xhr=new XMLHttpRequset(); xhr.addEventListener("load",loadHandler); xhr.open("GET ...

  4. JQuery Ajax执行过程AOP拦截

    JQuery Ajax过程AOP:用于在Ajax请求发送过程中执行必备操作,比如加载数据访问令牌. $.ajaxSetup({ type: "POST", error: funct ...

  5. Ajax完整篇(转载)

    Ajax 完整教程 第 1 页 Ajax 简介Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用 ...

  6. ajax详细介绍

    a.什么是Ajax    Asynchronous JavaScript and XML(异步JavaScript和XML)     节省用户操作,时间,提高用户体验,减少数据请求    传输获取数据 ...

  7. 基于PHP的AJAX学习笔记(教程)

    本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...

  8. CodeIgniter框架入门教程——第三课 URL及ajax

    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...

  9. AJAX 页面数据传递

    $.ajax({ //一个Ajax过程 type: "post", //以post方式与后台沟通 url: "personstockajax.php", //与 ...

随机推荐

  1. jQuery: 刨根问底 attr and prop两个函数的区别

    In this short post I will explain the difference between attributes and properties in HTML. The .pro ...

  2. September 25th 2017 Week 39th Monday

    No man is rich enough to buy back his own past. 没有人富有到可以赎回自己的过去. Those rich are not willing to buy b ...

  3. file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known

    请求页面时候报错 file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not know ...

  4. 2018 徐州赛区网赛 G. Trace

    题目链接在这里 题意是:按时间先后有许多左下角固定为(0,0),右上角为(xi,yi)的矩形浪潮,每次浪潮会留下痕迹,但是后来的浪潮又会冲刷掉自己区域的老痕,留下新痕迹,问最后留下的痕迹长度为多少? ...

  5. 021.13 IO流 RandomAccessFile对象

    对象和方法:RandomAccessFile:文件操作对象,Java提供getFilePointer:获取文件指针 特点:1.只能操作文件2.既能读,又能写3.里面维护了一个数组,内部定义了字符的读和 ...

  6. PHP设计模式系列 - 策略模式

    策略模式: 策略模式设计帮助构建的对象不必自身包含逻辑,而是能够根据需要利用其他对象中的算法. 使用场景: 例如有一个CD类,我们类存储了CD的信息. 原先的时候,我们在CD类中直接调用getCD方法 ...

  7. JDK1.6在LINUX下的安装配置[转]

    JDK1.6在LINUX下的安装是如何进行的呢,让我们开始我们的演示: Ubuntu Linux下jdk的安装与配置 1.JDK1.6安装准备 从sun公司网站www.sun.com下载linux版本 ...

  8. numpy的array数据类型(创建)

    import numpy as np # 创建 # 创建一维数组 a = np.array([1, 2, 3]) print(a) ''' [1 2 3] ''' # 创建多维数组 b = np.ar ...

  9. 搭建高可用mysql系列(1)-- Percona XtraDB Cluster介绍

    Percona XtraDB Cluster (下文简称PXC)是一个开源的mysql 高可用解决方案.它将Percona Server和Percona XtraBackup与Galera库集成在一起 ...

  10. pl/sql连接远程oracle

    1.找到oracle安装程序下的网络配置助手 2.选中本地net服务,进行添加 3.输入远程oracle服务名 4.选中tcp协议 5.输入远程oracle的ip地址 6.在网络服务名处,随便输入一个 ...