master

分支 (1)

管理

管理

master

jquery_test
/
ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script src="http://localhost:8080/jquery.min.js"></script>
    <script>
        ///原生js做ajax ----开始
        //2020-11-1我进 行 了 修 改
        var xmlhttp;

        function show() {
            createxmlhttp();
            initxmlhttp();
            xmlhttp.open("Get","server/a.txt",true);
            xmlhttp.send();
        }
        function createxmlhttp() {
            if (window.XMLHttpRequest)
            {   //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }            else            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        function  initxmlhttp() {
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    //alert("请求已经完成，并收到了回复==>>"+xmlhttp.responseText);
                    var mydiv=document.getElementById("txt");
                    mydiv.innerHTML = xmlhttp.responseText;
                }
            }
        }
        ///原生js做ajax ----结束

        //jquery  做ajax
         $(function () {
            $("#b2").click(function () {
                $.get("server/myjs.js",function (data) {
 //                   alert(data);
                    $("#newsc").html("jquery"+data);
                })
            });

             $("#b3").click(function () {
                 $.get("server/mytable.html",function (data) {
                     $("#txt").html(data);
                 })
             });
         })
    </script>
    <script id="newsc"></script>
</head>
<body>
<h3><a href="json.html">json实验</a> </h3>
<h3><a href="jsobject.html">关于js面向对象</a> </h3>
    <h2>AJAX应用</h2>
    <div id="txt"></div>
    <button onclick="show()">远程测试</button>
    <button id="b2">jquery远程测试</button>
    <br>
    <button onclick="showme()">显示</button>
    <button id="b3">加入远程表格</button>

    <p>AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。</p>
    <p>假想自己的文件是服务器上的 <a href="server/a.txt">数据</a> <br>
        <a href="js/jquery.min.js">jquery</a>
    </p>
    <p>使用tomcat作为服务器，启动tomcat后，使用其中的js文件
        <a href="http://localhost:8080/jquery.min.js">http://localhost:8080/jquery.min.js</a>
    </p>
    <p>XMLHttpRequest 对象 <br>
        所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 <br>
        XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，
        对网页的某部分进行更新。</p>
    <p>
        open（请求方式，路径，是否同步）
    xmlhttp.open("POST","/try/ajax/demo_post2.php",true); <br>
        设置请求头<a href="https://baike.baidu.com/item/MIME/2900607?fr=aladdin"> （ MIME类型）</a>
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");<br>
    send（）发送数据 xmlhttp.send("fname=Henry&lname=Ford");
    </p>
     <h3>服务器响应</h3>
    <p>
    如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。<br>
    responseText 	获得字符串形式的响应数据。<br>
    responseXML 	获得 XML 形式的响应数据。.....(json,css,js)...
    </p>
    <h3>
    onreadystatechange 事件
    </h3>
    <p>
    当请求被发送到服务器时，我们需要执行一些基于响应的任务。<br>

    每当 readyState 改变时，就会触发 onreadystatechange 事件。<br>

    readyState 属性存有 XMLHttpRequest 的状态信息。<br>

    下面是 XMLHttpRequest 对象的三个重要的属性：<br>

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

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

    0: 请求未初始化<br>
    1: 服务器连接已建立<br>
    2: 请求已接收<br>
    3: 请求处理中<br>
    4: 请求已完成，且响应已就绪<br>
        <br>
    status <br>	200: "OK"<br>
    404: 未找到页面<br>
    </p>

    <hr>
<h3>jquery ajax 请求</h3>
    <p>
    $.ajax(url,[settings])<br>
    $.get(url,[data],[fn],[type])<br>
    $.post(url,[data],[fn],[type])<br>
    </p>


</body>
</html>