对AJAX的总结

 
通过前面对 AJAX 的讲解,我们可以将 AJAX 请求分成以下几个步骤:

  • 创建 XMLHttpRequest 对象;
  • 设置事件处理函数,处理返回的数据;
  • 初始化并发送请求。

可以将 AJAX 请求概括为一段固定的代码:

  1. <script type="text/javascript">
  2. var xmlhttp;// XMLHttpRequest 对象
  3. try{// code for IE7+, Firefox, Chrome, Opera, Safari
  4. xmlhttp=newXMLHttpRequest();
  5. }catch(e){// code for IE6, IE5
  6. xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  7. }
  8. xmlhttp.onreadystatechange=function(){// 事件处理函数
  9. if(xmlhttp.readyState==4&& xmlhttp.status==200){
  10. // 这里写你的代码,可以使用 responseText 接收返回的数据
  11. }
  12. }
  13. xmlhttp.open(POST/GET,url,true);// 选择发送方式,确定 url
  14. xmlhttp.send(data);// POST 方式发送的数据,GET 方式留空
  15. </script>
 

GET 还是 POST

与 POST 相比,GET 更简单也更快,在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库);
  • 向服务器发送大量数据(POST 没有数据量限制);
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠。
 

GET 请求

一个简单的 GET 请求:

  1. xmlhttp.open("GET","demo_get.asp",true);
  2. xmlhttp.send();
 

在上面的例子中,您可能得到的是缓存的结果。

为了避免这种情况,请向 URL 添加一个唯一的 ID:

  1. xmlhttp.open("GET","demo_get.asp?t="+Math.random(),true);
  2. xmlhttp.send();
 

如果您希望通过 GET 方法发送信息,请向 URL 添加信息:

  1. xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
  2. xmlhttp.send();
 

POST 请求

一个简单 POST 请求:

  1. xmlhttp.open("POST","demo_post.asp",true);
  2. xmlhttp.send();
 

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

  1. xmlhttp.open("POST","ajax_test.asp",true);
  2. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  3. 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 事件时执行的任务(每次调用可能不尽相同):

  1. function myFunction()
  2. {
  3. loadXMLDoc("ajax_info.txt",function()
  4. {
  5. if(xmlhttp.readyState==4&& xmlhttp.status==200)
  6. {
  7. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  8. }
  9. });
  10. }

【06】对AJAX的总结(转)的更多相关文章

  1. 毕业设计《项目管理》总结06之ajax的初步使用经验

    1.ajax页面时不能实现下载功能,因为后台下载功能返回的是一个流,而ajax得到后台的数据只能是字符串或字符,所以实现的方法可以: 例如:用js生成一个form,用这个form提交参数,并返回“流” ...

  2. $.ajax()方法和$.get()方法使用小结

    一. 使用JQuery的$.get()方法实现异步请求 1. 编写JSP <!DOCTYPE html> <html lang="en"> <head ...

  3. Centos7搭建需要mysql的网站

    1.在centos7上安装好http.php.php-mysql服务 php-mysql是用来链接的工具 2.在centos5上yum安装mysql 注意在搭建本地yum源时把校验关闭,不然安装不上 ...

  4. 06: AJAX全套 & jsonp跨域AJAX

    目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...

  5. django之ORM的查询优化、Ajax 06

    目录 ORM查询优化 only与defer select_related与prefetch_related查询优化 choices参数 MTV与MVC模型 Ajax简介 AJAX常见应用情景 AJAX ...

  6. [原创]jquery+css3打造一款ajax分页插件

    最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...

  7. AJAX简介

    基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...

  8. PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)

    说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...

  9. Ajax中Get请求与Post请求的区别

    Get请求和Post请求的区别 1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来 2.使用Get请求发送数据量小,Post请求发送数据量大 例子 页面的HTML代码: &l ...

随机推荐

  1. bzoj2002 [Hnoi2010]Bounce 弹飞绵羊【分块】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 这一题除了LCT解法,还有一种更巧妙,代码量更少的解法,就是分块.先想,如果仅仅记录每 ...

  2. 51Nod 1315 合法整数集

    1315 合法整数集 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 一个整数集合S是合法的,指S的任意子集subS有Fu ...

  3. Service官方教程(8)Bound Service示例之2-跨进程使用Messenger

    Compared to AIDL When you need to perform IPC, using a Messenger for your interface is simpler than ...

  4. windows系统里Cygwin中如何正确安装wget(图文详解)

    具体步骤,见如下: https://ftp.gnu.org/gnu/wget/ 解压到Cygwin的主目录中,一般是   你的Cygwin目录/home/当前用户名/ . 我这是如下     先./c ...

  5. android开发学习——android studio 引入第三方库的总结

    http://www.jianshu.com/p/0c592fff5d89 总结的很溜

  6. GridView 中绑定DropDownList ,下拉框默认选中Label的值

    在GridView中,我们 有时候要绑定值. 前台绑定的代码可以这样 <asp:TemplateField HeaderText="当前状态" ItemStyle-Horiz ...

  7. Java编程思想总结笔记Chapter 3

    本章需要总结的不多,但细节的东西需要注意,有些很容易遗忘. 第三章 目录: 3.1 更简单的打印语句 3.2 使用Java操作符 3.3 优先级 3.4 赋值 3.5 算数操作符 3.6 自动递增和递 ...

  8. matlab中数据类型

    在MATLAB中有15种基本数据类型,分别是8种整型数据.单精度浮点型.双精度浮点型.逻辑型.字符串型.单元数组.结构体类型和函数句柄.这15种基本数据类型具体如下. 有符号整数型:int8,int1 ...

  9. docker 容器挂载主机目录,访问出现 cannot open directory /mnt/home/webroot/: Permission denied 的解决办法

    问题原因及解决办法 原因是CentOS7中的安全模块selinux把权限禁掉了,至少有以下三种方式解决挂载的目录没有权限的问题: 1.在运行容器的时候,给容器加特权,及加上 --privileged= ...

  10. GridSearchCV 与 RandomizedSearchCV 调参

    GridSearchCV    GridSearchCV的名字其实可以拆分为两部分,GridSearch和CV,即网格搜索和交叉验证. 这两个概念都比较好理解,网格搜索,搜索的是参数,即在指定的参数范 ...