AJAX 过程总结
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 过程总结的更多相关文章
- 用Promise对象封装JQuery的AJAX过程
let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...
- Ajax过程
http://www.cnblogs.com/daicunya/p/6227550.html 1.创建XMLHttpRequest对象,也就是创建一个异步调用对象. 2.创建一个新的HTTP请求,并指 ...
- 用js写个原生的ajax过程
var xhr=new XMLHttpRequset(); xhr.addEventListener("load",loadHandler); xhr.open("GET ...
- JQuery Ajax执行过程AOP拦截
JQuery Ajax过程AOP:用于在Ajax请求发送过程中执行必备操作,比如加载数据访问令牌. $.ajaxSetup({ type: "POST", error: funct ...
- Ajax完整篇(转载)
Ajax 完整教程 第 1 页 Ajax 简介Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用 ...
- ajax详细介绍
a.什么是Ajax Asynchronous JavaScript and XML(异步JavaScript和XML) 节省用户操作,时间,提高用户体验,减少数据请求 传输获取数据 ...
- 基于PHP的AJAX学习笔记(教程)
本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...
- CodeIgniter框架入门教程——第三课 URL及ajax
本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...
- AJAX 页面数据传递
$.ajax({ //一个Ajax过程 type: "post", //以post方式与后台沟通 url: "personstockajax.php", //与 ...
随机推荐
- jQuery: 刨根问底 attr and prop两个函数的区别
In this short post I will explain the difference between attributes and properties in HTML. The .pro ...
- 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 ...
- 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 ...
- 2018 徐州赛区网赛 G. Trace
题目链接在这里 题意是:按时间先后有许多左下角固定为(0,0),右上角为(xi,yi)的矩形浪潮,每次浪潮会留下痕迹,但是后来的浪潮又会冲刷掉自己区域的老痕,留下新痕迹,问最后留下的痕迹长度为多少? ...
- 021.13 IO流 RandomAccessFile对象
对象和方法:RandomAccessFile:文件操作对象,Java提供getFilePointer:获取文件指针 特点:1.只能操作文件2.既能读,又能写3.里面维护了一个数组,内部定义了字符的读和 ...
- PHP设计模式系列 - 策略模式
策略模式: 策略模式设计帮助构建的对象不必自身包含逻辑,而是能够根据需要利用其他对象中的算法. 使用场景: 例如有一个CD类,我们类存储了CD的信息. 原先的时候,我们在CD类中直接调用getCD方法 ...
- JDK1.6在LINUX下的安装配置[转]
JDK1.6在LINUX下的安装是如何进行的呢,让我们开始我们的演示: Ubuntu Linux下jdk的安装与配置 1.JDK1.6安装准备 从sun公司网站www.sun.com下载linux版本 ...
- numpy的array数据类型(创建)
import numpy as np # 创建 # 创建一维数组 a = np.array([1, 2, 3]) print(a) ''' [1 2 3] ''' # 创建多维数组 b = np.ar ...
- 搭建高可用mysql系列(1)-- Percona XtraDB Cluster介绍
Percona XtraDB Cluster (下文简称PXC)是一个开源的mysql 高可用解决方案.它将Percona Server和Percona XtraBackup与Galera库集成在一起 ...
- pl/sql连接远程oracle
1.找到oracle安装程序下的网络配置助手 2.选中本地net服务,进行添加 3.输入远程oracle服务名 4.选中tcp协议 5.输入远程oracle的ip地址 6.在网络服务名处,随便输入一个 ...