7.14号学习itcast ajax视频笔记2

vzhchv0010

浏览: 29722 次
性别:
来自: 北京

最近访客更多访客>>

吴兴鹏

xx5333

MYEYE_CAMEL

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax jQuery 浏览器 XML JavaScript

1.首先用XMLHttpRequest对象来进行简单的验证例子,在这例子里分get和post两种方式分别写例子,还有纯文本和xml两种返回
用户信息格式

post方法返回纯文本
准备工作: 开发工具IntelliJ 7.0 集成工具,jquery.js,

1.post.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>hehe</title>
    <script type="text/javascript" src="jslib/zhc2.js"></script>

</head>
<body>
        ========<br />
   <input id="name" type="text" />
   <input type="button" value="校验" onclick="verifyown()" />
    <div id="result" ></div>
</body>
</html>

2.zhc2.js

   var xmlhttp;
function verifyown() {

   
    var username;
    username = document.getElementById("name").value;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        //针对特定浏览器进行bug修正
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }

    } else if (window.ActiveXObject) {
        var activName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activName.length; i++) {
            try {
                xmlhttp = new ActiveXObject(activeName[i]);
                break;
            } catch(e) {

            }
        }
    }
    xmlhttp.onreadystatechange = callback;
    //3. open参数
    // http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
     //请求的URL地址，可以为绝对地址也可以为相对地址
    //布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
    //第三个参数理解:如果为异步,则程序运行到这还会继续向下进行,如果是同步的,必须在send()方法处等服务器把数据返回来后才会向后运行.
    //如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口
    //验证信息中的密码部分，如果用户名为空，则此值将被忽略。
    // xmlhttp.open("GET","zhc?name="+username,true);
     //对于post方法来说:
     //post :第二个参数只写url地址,不写跟着的信息
       xmlhttp.open("POST","zhc",true);
    // 自己设置http请求头,application/x-www-form-urlencoded可以满足大部分需要
       xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;
    //post方式发送数据 ,发给服务器的信息需要在这里面设置
       xmlhttp.send("name="+username);
       
       //到此,post和get没有别的区别了.
}

function callback(){
     //onreadystatechange为了保证数据回来之后能够找到方法来执行,共5个状态
    //每个状态的变化都会运行callback()的方法
    //0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
    //1 (初始化) 对象已建立，尚未调用send方法
    //2 (发送数据) send方法已调用，但是当前的状态及http头未知
    //3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
    //4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
    //判断服务器返回状态,看对象是否交互完成
    if(xmlhttp.readyState== 4)    {
           if(xmlhttp.status == 200){
            //获取服务器返回对象
            //杜宇httprequest对象返回对象的形式两种,一种是纯文本,一种是xml方式
               var fanhuizhi =  xmlhttp.responseText;
             //用dom方式返回,先得到节点
               var divNode = document.getElementById("result");
               //把该节点的值设置为刚得到的值
               divNode.innerHTML = fanhuizhi ;

           }
    }
    //个人认为:fierbug只能调试语法之类的错误,如果你是因为对象名字,大小写等写错则不会提示error.只能一个一个区查对象

}

其实get和post不同主要是在向服务器传送的时候有差别,体现在open()方法和send()方法中.其它地方都一样

分享到：

7.14号学习itcast ajax视频笔记3 | 7.14号学习itcast ajax视频笔记1

2009-07-14 21:53
浏览 904
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

7.14号学习itcast ajax视频笔记2

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

7.14号学习itcast ajax视频 笔记2

评论

发表评论

相关推荐

7.14号学习itcast ajax视频 笔记总结

7.14号学习itcast ajax视频 笔记5

7.14号学习itcast ajax视频 笔记4

7.14号学习itcast ajax视频 笔记3

7.14号学习itcast ajax视频 笔记1

7.14号学习itcast ajax视频 笔记

最近访客更多访客>>

7.14号学习itcast ajax视频笔记2

7.14号学习itcast ajax视频笔记总结

7.14号学习itcast ajax视频笔记5

7.14号学习itcast ajax视频笔记4

7.14号学习itcast ajax视频笔记3

7.14号学习itcast ajax视频笔记1

7.14号学习itcast ajax视频笔记