【06】对AJAX的总结(转)
对AJAX的总结
- 创建 XMLHttpRequest 对象;
- 设置事件处理函数,处理返回的数据;
- 初始化并发送请求。
可以将 AJAX 请求概括为一段固定的代码:
<script type="text/javascript">
var xmlhttp;// XMLHttpRequest 对象
try{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=newXMLHttpRequest();
}catch(e){// code for IE6, IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){// 事件处理函数
if(xmlhttp.readyState==4&& xmlhttp.status==200){
// 这里写你的代码,可以使用 responseText 接收返回的数据
}
}
xmlhttp.open(POST/GET,url,true);// 选择发送方式,确定 url
xmlhttp.send(data);// POST 方式发送的数据,GET 方式留空
</script>
GET 还是 POST
与 POST 相比,GET 更简单也更快,在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库);
- 向服务器发送大量数据(POST 没有数据量限制);
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠。
GET 请求
一个简单的 GET 请求:
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xmlhttp.open("GET","demo_get.asp?t="+Math.random(),true);
xmlhttp.send();
如果您希望通过 GET 方法发送信息,请向 URL 添加信息:
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
POST 请求
一个简单 POST 请求:
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
方法 |
描述 |
setRequestHeader(header,value) |
向请求添加 HTTP 头。 · header: 规定头的名称 · value: 规定头的值 |
是否异步请求
对于 open() 方法:
open(method,url,async)
async 为 true 或 false。
async=true 时,JavaScript 无需等待服务器的响应,可以在等待服务器响应的同时执行其他脚本,当响应完成后再对返回的数据进行处理,所以,AJAX 请求与其他脚本的执行是分开的,互不影响。
async=false 时,JavaScript 会等到服务器响应完成后才继续执行其他脚本,如果服务器繁忙或缓慢,JavaScript 会一直等待,可能会挂起或停止。这种方式只适用于一些小而简单的请求。
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML),对于 web 开发人员来说,发送异步请求是一个巨大的进步,能在很大程度上减少服务器的开销,提高客户端脚本的执行速度。AJAX 重在“异步”,如果 async=false ,AJAX 就是去了意义。所以,如无特殊要求,一般是 async=true ,既能充分发挥 AJAX 的作用,也不会遇到莫名其妙的错误。
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if(xmlhttp.readyState==4&& xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
【06】对AJAX的总结(转)的更多相关文章
- 毕业设计《项目管理》总结06之ajax的初步使用经验
1.ajax页面时不能实现下载功能,因为后台下载功能返回的是一个流,而ajax得到后台的数据只能是字符串或字符,所以实现的方法可以: 例如:用js生成一个form,用这个form提交参数,并返回“流” ...
- $.ajax()方法和$.get()方法使用小结
一. 使用JQuery的$.get()方法实现异步请求 1. 编写JSP <!DOCTYPE html> <html lang="en"> <head ...
- Centos7搭建需要mysql的网站
1.在centos7上安装好http.php.php-mysql服务 php-mysql是用来链接的工具 2.在centos5上yum安装mysql 注意在搭建本地yum源时把校验关闭,不然安装不上 ...
- 06: AJAX全套 & jsonp跨域AJAX
目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...
- django之ORM的查询优化、Ajax 06
目录 ORM查询优化 only与defer select_related与prefetch_related查询优化 choices参数 MTV与MVC模型 Ajax简介 AJAX常见应用情景 AJAX ...
- [原创]jquery+css3打造一款ajax分页插件
最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...
- AJAX简介
基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...
- PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)
说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
- Ajax中Get请求与Post请求的区别
Get请求和Post请求的区别 1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来 2.使用Get请求发送数据量小,Post请求发送数据量大 例子 页面的HTML代码: &l ...
随机推荐
- bzoj2002 [Hnoi2010]Bounce 弹飞绵羊【分块】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 这一题除了LCT解法,还有一种更巧妙,代码量更少的解法,就是分块.先想,如果仅仅记录每 ...
- 51Nod 1315 合法整数集
1315 合法整数集 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 一个整数集合S是合法的,指S的任意子集subS有Fu ...
- Service官方教程(8)Bound Service示例之2-跨进程使用Messenger
Compared to AIDL When you need to perform IPC, using a Messenger for your interface is simpler than ...
- windows系统里Cygwin中如何正确安装wget(图文详解)
具体步骤,见如下: https://ftp.gnu.org/gnu/wget/ 解压到Cygwin的主目录中,一般是 你的Cygwin目录/home/当前用户名/ . 我这是如下 先./c ...
- android开发学习——android studio 引入第三方库的总结
http://www.jianshu.com/p/0c592fff5d89 总结的很溜
- GridView 中绑定DropDownList ,下拉框默认选中Label的值
在GridView中,我们 有时候要绑定值. 前台绑定的代码可以这样 <asp:TemplateField HeaderText="当前状态" ItemStyle-Horiz ...
- Java编程思想总结笔记Chapter 3
本章需要总结的不多,但细节的东西需要注意,有些很容易遗忘. 第三章 目录: 3.1 更简单的打印语句 3.2 使用Java操作符 3.3 优先级 3.4 赋值 3.5 算数操作符 3.6 自动递增和递 ...
- matlab中数据类型
在MATLAB中有15种基本数据类型,分别是8种整型数据.单精度浮点型.双精度浮点型.逻辑型.字符串型.单元数组.结构体类型和函数句柄.这15种基本数据类型具体如下. 有符号整数型:int8,int1 ...
- docker 容器挂载主机目录,访问出现 cannot open directory /mnt/home/webroot/: Permission denied 的解决办法
问题原因及解决办法 原因是CentOS7中的安全模块selinux把权限禁掉了,至少有以下三种方式解决挂载的目录没有权限的问题: 1.在运行容器的时候,给容器加特权,及加上 --privileged= ...
- GridSearchCV 与 RandomizedSearchCV 调参
GridSearchCV GridSearchCV的名字其实可以拆分为两部分,GridSearch和CV,即网格搜索和交叉验证. 这两个概念都比较好理解,网格搜索,搜索的是参数,即在指定的参数范 ...