向服务器发送请求如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：Open方法了有两种请求方式——get和post

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

1、无法使用缓存文件（更新服务器上的文件或数据库）

2、向服务器发送大量数据（POST 没有数据量限制）

3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

注释：send(string)方法只有当时post请求时才会传入参数

onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

GET请求：

<body>

    <button onclick="loadXMLDoc()">点击发送异步请求</button>

    <script>

        function loadXMLDoc() {

            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function () {

                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    alert(xmlhttp.responseText);

                }

            }

            xmlhttp.open("get", "person.ashx", true);

            xmlhttp.send();

        }

    </script>

</body>

PSOT请求：

<body>

    <button onclick="fs()">点击发送异步请求</button>

    <script>

        var xmlHttp;

        function GetXmlHttpObject() {

            if (window.XMLHttpRequest) {

                // code for IE7+, Firefox, Chrome, Opera, Safari

                xmlhttp = new XMLHttpRequest();

            } else {// code for IE6, IE5

                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

            return xmlhttp;

        }

        function getOkPost() {

            if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) {

                // 本地提示：加载中/处理中

            }

            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                var d = xmlHttp.responseText; // 返回值

                // 处理返回值

                alert(d);

            }

        }

        function fs() {

            xmlHttp = GetXmlHttpObject();

            if (xmlHttp == null) {

                alert('您的浏览器不支持AJAX！');

                return;

            }

            var url = "info.ashx";

            xmlhttp.open("POST", url, true);

            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            var data = "name=wqx&age=10"

            xmlhttp.send(data);

            xmlHttp.onreadystatechange = getOkPost;//发送事件后，收到信息了调用函数

        }

    </script>

</body>

参考：W3C

JS——AJAX的更多相关文章

  1. js ajax post提交 ie和火狐、谷歌提交的编码不一致，导致中文乱码

    今天遇到一个问题找了很久发现: 使用js ajax post提交 ie和火狐.谷歌提交的编码不一致,导致中文乱码 //http://www.cnblogs.com/QGC88 $.ajax({ url ...

  2. JavaScript学习总结【12】、JS AJAX应用

    1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...

  3. 简单的前端js+ajax 购物车框架(入门篇)

    其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来.只能自己默默的看着哪些代码,无能为力. 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的 ...

  4. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  5. js+ajax编码三级联动

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title> ...

  6. 注册页面手机验证码无跳转接收[html+js+ajax+php]

    [学习笔记] 来源:注册时需要使用短信验证码,但是注册的时候,点击接收验证码时,会产生跳转(尼玛,这不是我想要的啊!o(╥﹏╥)o) 查询资料和看书之后,知道使用js+ajax可以实现,就从网上找了一 ...

  7. js ajax请求传token

    js  ajax请求传token 方法一: headers: { Authorization: "BasicAuth " + token } 方法二: beforeSend: fu ...

  8. js ajax设置和获取自定义header信息的方法总结

    目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...

  9. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  10. JS Ajax跨域访问

    js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...

随机推荐

  1. 【BZOJ2081】Beads（哈希表）

    题意: 翻转是指其中一段长度为k的子串全部翻转 n<=200000 a[i]<=n 思路:枚举k,直接哈希判充即可 时间复杂度是n/i求和,根据定理可得是O(n log n)级别的 单哈双 ...

  2. 【BZOJ2434】阿狸的打字机（fail树，DFS序）

    题意: 1<=N<=10^5 1<=M<=10^5 输入总长<=10^5   思路: From http://blog.csdn.net/lych_cys/article ...

  3. BAT经典面试题，深入理解Java内存模型JMM

    Java 内存模型 Java 内存模型(JMM)是一种抽象的概念,并不真实存在,它描述了一组规则或规范,通过这组规范定义了程序中各个变量(包括实例字段.静态字段和构成数组对象的元素)的访问方式.试图屏 ...

  4. gn3 --iou

    http://www.wyzc.com/Course/Course/learnAction/id/14049/center/0#lesson/400847 http://www.mamicode.co ...

  5. eclipse的Java项目修改后要不要重启tomcat问题

    tomcat服务器重新部署工程或者修改了项目的代码就必须重启tomcat吗? 答: omcat服务器重新部署工程或者修改了项目的代码就必须重启tomcat吗?有没有不重启的方法,或者其他高效点的,让服 ...

  6. 百度LBS云搜索时报错 &quot;filter:area is not filteable field, please set property in the cloud-storage

    {"status":2,"message":"filter:area is not filteable field, please set prope ...

  7. swift 2.0 语法 可选类型

    import UIKit /*: 可选类型(可以有值, 也可以没有值) * 在OC中我们可以给一个对象类型变量赋值为nil或者一个对象, 而在Swift中如果想给一个变量赋值为nil那么必须明确指定为 ...

  8. TTS-零基础入门-10分钟教你做一个语音功能

    在本片博客正式開始之前,大家先跟我做一个简单的好玩的 小语音. 新建一个文本文档,然后再文档里输入这样 一句话  CreateObject("SAPI.SpVoice").Spea ...

  9. U4687 不无聊的序列

    U4687 不无聊的序列 0通过 85提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 如果一个序列的任意一个连续的子序列中没有只出现一次的元素,辣么kkk就认为这个序 ...

  10. bzoj1607 [Usaco2008 Dec]Patting Heads 轻拍牛头——暴力

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1607 观察一下数据范围,就是纯粹的暴力. 代码如下: #include<iostrea ...