对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. Qt事件系统之五:事件过滤器和事件的发送

    Qt提供了事件过滤器来实现在一个部件中监控其他多个部件的事件.事件过滤器与其他部件不同,它不是一个类,只是由两个函数组成的一种操作,用来完成一个部件对其他部件的事件的监视.这两个函数分别是 insta ...

  2. 首先定义一个5X8的二维数组,然后使用随机数填充满。借助Arrays的方法对二维数组进行排序。

    package day02; import java.util.Arrays; import java.util.Random; public class Test01 { public static ...

  3. 转-关于UIView的autoresizingMask属性的研究

    在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. 1 2 3 4 5 6 7 8 9 enum  ...

  4. 转】用Hadoop构建电影推荐系统

    原博文出自于: http://blog.fens.me/hadoop-mapreduce-recommend/ 感谢! 用Hadoop构建电影推荐系统 Hadoop家族系列文章,主要介绍Hadoop家 ...

  5. [转]Android项目快速开发框架探索(Mysql + OrmLite + Hessian + Sqlite)

    前言 结合之前所用的ormlite和hessian,再加上SAE已经支持JAVA,把服务端切换到JAVA,也就有了本文.使用hessian来做数据传输,ormlite来实现客户端与服务端的数据存储,极 ...

  6. mysql 判断null 和 空字符串

    1.在mysql中null 不能使用任何运算符与其他字段或者变量(函数.存储过程)进行运算.若使用运算数据就可能会有问题. 2.对null 的判断: 创建一个user表:id 主健 name 可以为空 ...

  7. 第二章 TCP/IP 基础知识

    第二章 TCP/IP 基础知识   TCP/IP  transmission control protocol and ip internet protocol 是互联网众多通信协议中最为著名的.   ...

  8. 如何用 CSS 绘制各种形状

    自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...

  9. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  10. angular2快速开始

    简介 5 分钟从0搭建一个ng2项目demohttps://angular.io/docs/js/latest/quickstart.html 你运气真好,竟然看到了这篇文章,你省事了,一分钟让你完成 ...