理解Ajax及其实例-优快云博客

本文链接：https://blog.youkuaiyun.com/u014473112/article/details/52182968

参考：http://www.runoob.com/ajax/ajax-examples.html
1、首先明白什么是ajax提交，ajax可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页

2、AJAX使用
（1）创建对象
现代浏览器使用

var xmlhttp=new XMLHttpRequest();

老版本的浏览器用ActiveX对象

var xmlhttp=new ActivieXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

（2）请求
向服务器发送请求用open(method,url,async)方法和send(String)方法

open(method,url,async)

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(String)：仅用于POST请求

（3）响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText:获得字符串形式的响应数据
获得XML形式的响应数据

（4）响应的三个属性
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

onreadystatechange :存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status：
200: “OK”
404: 未找到页面

3、使用实例
index.js

var express = require('express');
var router = express.Router();

router.get('/form',function (req,res,next) {
  res.render('form',{title:'ajax example'});
});

router.get('/formget',function(req,res,next){
 server=http.createServer(function(req,res){

    res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://10.222.225.27"});
    res.write("你好啊!");

    res.end();
server.listen(1337,"10.222.225.27",function(){
});
module.exports = router;

form.html

<!DOCTYPE html>
<html>
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdn.bootcss.com/pnotify/2.0.0/pnotify.all.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/pnotify/2.0.0/pnotify.all.min.js"></script>
<script type="text/javascript">PNotify.prototype.options.styling = "bootstrap3";</script>
<head lang="en">
<meta charset="UTF-8">
 <title><%= title %></title>
 <script type="text/javascript">
     function GetData(){
            var xhr=new XMLHttpRequest();
            xhr.open("GET","http://10.222.225.27:3000/formget",true);
            xhr.onreadystatechange=function () {
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        document.getElementById("res").innerHTML=xhr.responseText;
                    }
                }
            }
            xhr.send(null);
        }

    </script>
</head>
<body>
<button type="button" id="submit" value="提交" onclick="GetData()">提交</button>
<div id="res">nnnn</div>
</body>
</html>