【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 ...
随机推荐
- Qt事件系统之五:事件过滤器和事件的发送
Qt提供了事件过滤器来实现在一个部件中监控其他多个部件的事件.事件过滤器与其他部件不同,它不是一个类,只是由两个函数组成的一种操作,用来完成一个部件对其他部件的事件的监视.这两个函数分别是 insta ...
- 首先定义一个5X8的二维数组,然后使用随机数填充满。借助Arrays的方法对二维数组进行排序。
package day02; import java.util.Arrays; import java.util.Random; public class Test01 { public static ...
- 转-关于UIView的autoresizingMask属性的研究
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. 1 2 3 4 5 6 7 8 9 enum ...
- 转】用Hadoop构建电影推荐系统
原博文出自于: http://blog.fens.me/hadoop-mapreduce-recommend/ 感谢! 用Hadoop构建电影推荐系统 Hadoop家族系列文章,主要介绍Hadoop家 ...
- [转]Android项目快速开发框架探索(Mysql + OrmLite + Hessian + Sqlite)
前言 结合之前所用的ormlite和hessian,再加上SAE已经支持JAVA,把服务端切换到JAVA,也就有了本文.使用hessian来做数据传输,ormlite来实现客户端与服务端的数据存储,极 ...
- mysql 判断null 和 空字符串
1.在mysql中null 不能使用任何运算符与其他字段或者变量(函数.存储过程)进行运算.若使用运算数据就可能会有问题. 2.对null 的判断: 创建一个user表:id 主健 name 可以为空 ...
- 第二章 TCP/IP 基础知识
第二章 TCP/IP 基础知识 TCP/IP transmission control protocol and ip internet protocol 是互联网众多通信协议中最为著名的. ...
- 如何用 CSS 绘制各种形状
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- angular2快速开始
简介 5 分钟从0搭建一个ng2项目demohttps://angular.io/docs/js/latest/quickstart.html 你运气真好,竟然看到了这篇文章,你省事了,一分钟让你完成 ...