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", //与 ...
随机推荐
- .net 和 core 数据库连接字符串
Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-xxxx.mdf;Initial Catalog= ...
- codeforces 432E Square Tiling
codeforces 432E Square Tiling 题意 题解 代码 #include<bits/stdc++.h> using namespace std; #define fi ...
- BZOJ2435:[NOI2011]道路修建 (差分)
Description 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿 意修建恰好 n – 1条双向道 ...
- P3558 [POI2013]BAJ-Bytecomputer
题目描述 A sequence of integers is given. The bytecomputer is a device that allows the following operati ...
- 'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
首先把 node_modules 文件夹删除 然后运行以下命令: cnpm install 这样就可以正常运行
- Kubernetes 1.6新特性
Kubernetes 1.6已结发布,包括9个Stable特性.12个Beta特性.8个Alpha特性,共29个新特性.Kubernetes 1.6重点关注集群规模扩展和自动化.目前最多支持5000个 ...
- python-文件基本操作(一) (转载)
转载自: https://www.cnblogs.com/nizhihong/p/6528439.html 一.打开文件的方法: 注意:file()和open()基本相同,且最后要用close()关闭 ...
- http 的request和response 在servlet的应用文件下载
一)response 我们通过浏览器访问网站的时候,处理响应的是response. 它由三部门组成:响应行.响应头.响应体 作用:往浏览器写东西. 1)响应行 格式:协议/版本 状态码 状态码说明. ...
- RS485接口为什么要接地
RS485接口为什么要接地 RS485接口有三根线,分别是A.B和GND线.因为RS485是差分传输的,所以很多工程师以为GND地线不重要,经常不接,甚至有些工程为了节约成本用两芯线或者用视频线来传输 ...
- SpringCloud 学习(一) :Features
话不多说,现在在开发微服务项目,也想系统的学习一下SpringCloud,顾选择硬着头皮跟着英文官方文档学习一遍SpringCloud. 现在公司在用SpringCloud,也有很好的实践应用,加上更 ...