ajax提交数据初试

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u014473112/article/details/52182967

参考: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>

在浏览器输入:http://10.222.225.27:3000/form
显示:
这里写图片描述

点击按钮
显示:
这里写图片描述

展开阅读全文

没有更多推荐了,返回首页