7.14号学习itcast ajax视频笔记1

最新推荐文章于 2023-09-22 01:46:34 发布

vzhchv0012

最新推荐文章于 2023-09-22 01:46:34 发布

阅读量132

点赞数

分类专栏： ajax 文章标签： Ajax 应用服务器浏览器 IE jQuery ViewUI

本文链接：https://blog.csdn.net/vzhchv0012/article/details/83429897

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

1.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/zhc1.js"></script>

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

2.zhc.js

   var xmlhttp; //定义全局变量
function verifyown() {

    //使用Document对象来获取节点数据
    //document一定要小写[一定注意],从页面取得要准备处理的值
    var username = document.getElementById("name").value;
    //1.创建XMLHttpRequest对象,如果不用框架,需要根据浏览器来应用不同的js
    //也就是首先要判断浏览器的种类
    //在js中,如果条件不为null,false,undefine都可以成立 [js使用技巧]
    if (window.XMLHttpRequest) {
        //针对filerfox,mozillar,IE7,IE8,opera
        //创建一个httprequest对象来跟服务器交互
        xmlhttp = new XMLHttpRequest();
        //针对特定浏览器进行bug修正
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        //适合IE6 ,不过所有ie浏览器都会支持该对象
        //利用以前IE的控件来创建 XMLHttpRequest对象.
        //版本较新的排在前面
        var activName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activName.length; i++) {
            try {
                xmlhttp = new ActiveXObject(activeName[i]);
                break;
            } catch(e) {

            }
        }
    }
    //2.注册回调函数,函数名后面不加括号,需要把回调函数的函数名注册给httprequest对象,而
    //加上括号,是代表运行该函数.返回的是运行后的值
    xmlhttp.onreadystatechange = callback;
    //3. open参数
    // a :http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
    // b :请求的URL地址，可以为绝对地址也可以为相对地址
    // c : 布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 
    //第三个参数理解:如果为异步,则程序运行到这还会继续向下进行,如果是同步的,必须在send()方法处等服务器把数据返回来后才会向后运行.
    //如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口
    //验证信息中的密码部分，如果用户名为空，则此值将被忽略。
     xmlhttp.open("GET","zhc?name="+username,true);
    //4.发送参数和服务器端交互. 因为是get方式,不用再传多余内容.
    //同步方式下,send()会在数据返回后才执行,也就是程序在此挂起.
     xmlhttp.send(null);
       
}

function callback(){
     //onreadystatechange为了保证数据回来之后能够找到方法来执行,共5个状态
    //每个状态的变化都会运行callback()的方法,也就是说一个异步互动后,callback需要调用5次
    //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.只能一个一个区查对象
  
}