十五、jQuery & AJAX（1）

原创于 2020-10-29 16:40:19 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery #ajax

JAVAEE 专栏收录该内容

66 篇文章

订阅专栏

本文详细介绍jQuery框架的基础知识，包括框架的下载与引入、jQuery对象与JS对象的转换、选择器的使用、DOM操作方法及遍历技巧，并对AJAX技术进行了概述。

文章目录

1 jQuery框架

1.1 jQuery框架概述

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。

1.2 jQuery框架的下载与引入

jQuery的官方下载

jQuery的官方下载地址：http://www.jquery.com

jQuery的版本（了解）

1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本
开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。

jQuery的引入

在需要使用jQuery的html中使用js的引入方式进行引入，如下：

<script type="text/javascript" src="jquery-x.x.x.js></script>

关于引入jquery的文件选哪个：
在这里插入图片描述

jQuery框架使用方式

关键代码解释

$(function(){ 自己的代码 })

是指 $(document).ready(function(){}) 的简写
用来在DOM加载完成之后执行一系列预先定义好的函数。

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery框架使用方式</title>

    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        /**
         * jQuery基本使用方法
         * 调用框架核心函数: 名字 jQuery()
         * 函数中,传递自定义的匿名函数
         * 匿名的函数中,定义自己的代码
         *
         * jQuery()核心函数,在页面全部加载完成后执行
         * 调用我们传递的匿名函数
         *
         * 简化操作: 核心函数名字简化为一个 $
         */
        /*jQuery( function(){
            alert("jQuery框架");
        } );*/

        $( function(){
            alert("jQuery框架");
        } );
    </script>
</head>
<body>

</body>
</html>

1.3 jQuery对象与js对象之间的转换

jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象，而不是js方式获得的DOM对象，二者的API方法不能混合使用，若想使用对方的API，需要进行对象的转换。

jQuery对象与DOM对象的关系：jQuery对象其实是一个JavaScript的数组，DOM对象是作为js方式获得的对象是js数组中的每一个元素。

使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下：

js的DOM对象转换成jQuery对象，DOM对象封装成JQuery对象，语法：$(js的DOM对象)
jQuery对象转换成js对象，JQuery下标索引获得DOM对象，语法：jquery对象[索引] 或 jquery对象.get(索引)

实例：
dom对象和JQuery对象调用方式：

<script type="text/javascript">
    /**
     * DOM对象: document.getXXX()获取标签对象, DOM对象
     * jQuery对象: jQuery框架获取到的标签,jQuery对象
     * 两个对象不通用
     */
    function fn() {
        //document对象获取文本框的值
        var user = document.getElementById("user");
        console.log(user.value);

        //jQuery框架提供的方法,获取文本框的值
        var userJquery = $("#user");
        console.log(userJquery.val());

     //   console.log(userJquery.value);
    }
</script>

dom转jquery：$封装

<script type="text/javascript">
    function fn() {
        //document对象 ,获取文本框
        var user = document.getElementById("user");
        //user是DOM对象,转成jQuery对象
        // DOM ==> jQuery  穿马甲, DOM对象上添加$包装
        var userJquery = $(user);
        console.log( userJquery.val() );
    }
</script>

jquery转dom：下标

<script type="text/javascript">
    function fn() {
        //获取文本框,jQuery的方式
       var userJquery =  $("#user");
       //userJquery对象,转成DOM对象
        //jQuery对象,本质上就是一个存储DOM对象的数组
        //jQuery ==> DOM 脱马甲
        var user = userJquery[0];
        console.log(user.value);
    }
</script>

2 jQuery选择器

2.1 基本选择器

语法

选择器名称	语法	解释
标签选择器（元素选择器）	$(“html标签名”)	获得所有匹配标签名称的元素
id选择器	$("#id的属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class的属性值")	获得与指定的class属性值匹配的元素

实例：

<!DOCTYPE html>
<html>
	<head>
		<title>基本选择器</title>
		<meta charset="utf-8" />
		<style type="text/css">
		。。。。。
		</style>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

		<script type="text/javascript">
			$(function(){
                /**
                 * jQuery的选择器: 找标签
                 *   在 页面中,快速的,精准的定位到标签上
                 *
                 *  基本选择器:
                 *     id选择器: 标签的id属性
                 *     class选择器: 标签的class属性
                 *     元素选择器: 标签的名
                 */

                //按钮b1绑定点击事件
                //事件发生,调用函数处理
                $("#b1").click( function(){
                    //改变 id 为 one 的元素的背景色为 红色" id="b1
					//jQuery框架函数 css(属性名,属性值)
					$("#one").css("background-color","red");
				} );

                //按钮b2绑定点击事件
				$("#b2").click(function(){
				    //改变元素名为 <div> 的所有元素的背景色为 红色
					//获取所有div
					$("div").css("background-color","red");
				});

				//按钮b3绑定点击事件
				$("#b3").click(function(){
				    //改变 class 为 mini 的所有元素的背景色为 红色
					$(".mini").css("background-color","red");
				});

				//按钮b4绑定点击事件
				$("#b4").click(function () {
					//改变所有的<span>元素和 id 为 two 的元素的背景色为红色
					//多个选择器, 逗号分开
					$("span,#two").css("background-color","red");
					//$("#two").css("background-color","red");
                });
			});
		</script>

	</head>

	<body>
		<input type="button" value="保存" class="mini" name="ok" class="mini" />
		<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1" />
		<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2" />
		<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3" />
		<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4" />
		<h1>有一种奇迹叫坚持</h1>
		<h2>自信源于努力</h2>
		<div id="one">
			id为one
		</div>
		<div id="two" class="mini">
			id为two class是 mini
			<div class="mini">class是 mini</div>
		</div>
		<div class="one">
			class是 one
			<div class="mini">class是 mini</div>
			<div class="mini">class是 mini</div>
		</div>
		<div class="one">
			class是 one
			<div class="mini01">class是 mini01</div>
			<div class="mini">class是 mini</div>
		</div>
		<div id="mover">
			div 动画
		</div>
		<span class="spanone">class为spanone的span元素</span>
		<span class="mini">class为mini的span元素</span>
	</body>

</html>

注意事项：
在最外层加了一层 $ (function(){})，里面再写jquery事件。因为直接在script里写，页面是从上到下执行的，执行到script里时，页面还没有加载完，直接取标签会出错。所以在最外面套一层$(function(){})，表示页加载完之后，再执行function(){}里的事件。

2.2 层级选择器

语法

选择器名称	语法	解释
后代选择器	$("A B ")	选择A元素内部的所有B元素
子选择器	$(“A > B”)	选择A元素内部的所有B子元素

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
          /**
	 * 层次选择器: 根据标签的子父关系
	 * a b: 选中的是a的所有子标签b,包含所有后代!! 儿子,孙子...
	 * a>b :选中的是a的所有子标签b,只有子代
           */
	$(function() {
		//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
		$("#b1").click(function() {
		    $("body div").css("background-color","red");
              })

		//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
		$("#b2").click(function() {
		    $("body > div").css("background-color","red");
		});
	})
</script>

2.3 表单属性选择器

选择器名称	语法	解释
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器	:checked	获得单选/复选框选中的元素
选中选择器	:selected	获得下拉框选中的元素

<!DOCTYPE html>
<html>
<head>
    <title>表单属性过滤选择器</title>
    <meta charset="UTF-8">
    <style type="text/css">
        。。。
    </style>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
            //限定文本输入框
            //属性选择器: $("标签[属性=值]:属性")
            $("#b1").click(function () {
                //获取所有的input标签,属性必须是text : enabled可用的
                var inputs = $("input[type=text]:enabled");
                //改变文本框内容
                for (var i = 0; i < inputs.length; i++) {
                    //jquery函数val() 直接调用输出值, val(参数)设置值
                    //jQuery对象本质是数组,存储的是多个DOM对象
                    $(inputs[i]).val("tom");
                }
            });

            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
            $("#b2").click(function () {
                //获取所有的input标签,属性必须是text : disabled可用的
                var inputs = $("input[type=text]:disabled");
                //改变文本框内容
                for (var i = 0; i < inputs.length; i++) {
                    //jquery函数val() 直接调用输出值, val(参数)设置值
                    //jQuery对象本质是数组,存储的是多个DOM对象
                    $(inputs[i]).val("jerry");
                }
            });

            //<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
            $("#b3").click(function () {
                //获取复选框 type=checkbox的选中的个数
                //获取到选中的即可
                var inputs = $("input[type=checkbox]:checked");
                console.log(inputs.length);
            });

            // <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
            $("#b4").click(function () {
                //获取的是所有的option标签:selected 被选中的
                //标签体的内容,jquery函数 text()
                var options = $("option:selected");
                for (var i = 0; i < options.length; i++) {
                    console.log($(options[i]).text());
                }
            });
        })
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1">
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2">
<br><br>
<input type="checkbox" name="items" value="美容">美容
<input type="checkbox" name="items" value="IT">IT
<input type="checkbox" name="items" value="金融">金融
<input type="checkbox" name="items" value="管理">管理
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
    <option>程序员</option>
    <option>中级程序员</option>
    <option>高级程序员</option>
    <option>系统分析师</option>
</select>
<select name="edu" id="edu">
    <option>本科</option>
    <option>博士</option>
    <option>硕士</option>
    <option>大专</option>
</select>
<br/>
<div id="two" class="mini">
    id为two class是 mini div
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
</body>
</html>

3 jQuery的DOM操作

3.1 jQuery对DOM树中的文本和值进行操作

语法

API方法	解释
val([value])	获得/设置元素value属性相应的值
text([value])	获得/设置元素的文本内容
html([value])	获得/设置元素的标签体内容

实例：

<script type="text/javascript">
    //页面加载完成
    $(function () {
        //获取迪丽热巴
        //jQuery框架定义函数 val() 可以获取到文本框中的值
        console.log($("#myinput").val());// java get
        $("#myinput").val("杨幂"); // java set

        //获得mydiv的文本内容
        //jQuery框架的函数 text()获取标签体的文本内容,纯文本
        console.log($("#mydiv").text());

        ///获取mydiv的标签体内容
        //jQuery框架的函数 html()获取标签体的文本内容,标签有效
        console.log($("#mydiv").html());

        /**
         * DOM对象属性:
         *   innerHTML 设置,获取标签体的内容,标签有效
         *   innerText 设置,获取标签体的内容,标签无效
         *
         * jQuery函数
         *   html()  设置,获取标签体的内容,标签有效
         *   text() 设置,获取标签体的内容,标签无效
         */

    });
</script>

3.2 jQuery对DOM树中的属性进行操作

语法

API方法	解释
attr(name, [value])	获得/设置可变的属性的值
prop(name, [value])	获得/设置固定值的属性的值(checked，selected)

<script type="text/javascript">
	//页面加载完成
	$(function() {
		//获取北京节点的name属性值
		//jQuery框架函数 attr()获取,设置标签的属性
		//attr("属性名")  获取属性值
		//attr("属性名","属性值")设置属性
		console.log($("#bj").attr("name"));


		//设置北京节点的name属性的值为dabeijing
		$("#bj").attr("name","dabeijing");


		//新增北京节点的discription属性 属性值是 地图
        $("#bj").attr("discription","地图");

	});

          //获得hobby的的选中状态
          //复选框的属性 checked
           /**
			 * jQuery,版本1.6开始,新增函数 prop函数
			 * 函数 attr : 使用,其他情况使用attr
			 * 函数 prop : 使用,遇到固有属性的时候,使用prop
			 *            checked="checked" 属性名和属性值相同
			 *            属性,写不写都是存在的!!
            */
          function fn() {

              console.log( $("#hobby").prop("checked") );
          }
</script>

4 jQuery的遍历

jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。

4.1 原始方式遍历

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>传统遍历</title>
    <script type="text/javascript">
        function fn() {
            var lis = document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                console.log(lis[i].innerHTML);
            }
        }
    </script>
</head>
<body onload="fn()">
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

4.2 jquery对象方法遍历

语法：

jquery对象.each(function(index,element){});

其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery的遍历each函数</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js">
    </script>

    <script type="text/javascript">
        $(function () {
            var lis = $("li");
            /*
               jQuery框架中函数each
               jQuery对象调用each函数
               each函数(自定义的匿名函数 function(){})
               匿名函数中,定义2个参数
               1个是索引,
               1个是元素

               each函数负责遍历,内部循环4次
               每一次循环,调用匿名函数
               传递到匿名函数中,遍历的元素和索引
             */
            lis.each(function(index,element){
                console.log(index+"=="+$(element).html());
            });
        });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

4.3 jquery的全局方法遍历（推荐使用）

语法：

$.each(jquery对象,function(index,element){});

其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS全局函数each</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js">
        
    </script>
    <script type="text/javascript">
        $(function () {
            /**
             * jQuery遍历:
             *  定义全局函数 each()
             *  上一个案例: each()函数的调用者,是jQuery对象
             *  全局函数: 调用不需要jQuery对象,
             *  使用的是核心函数调用
             *
             *  $.each(要遍历的数组,function(索引,元素){})
             *  第一个参数,是数组,或者是jQuery获取的对象
             *
             *  优势: 遍历的容器可以传递
             */
            var lis = $("li");
            $.each(lis,function(index,element){
                console.log( index+"=="+ $(element).html() );
            });

            var arr = [1,2,3,4,5];
            $.each(arr,function(index,element){
                console.log( index+"=="+element );
            });


        });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

5 ajax概述

5.1 ajax技术概述

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

5.2 同步方式与异步方式的区别

同步方式发送请求：

发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。

异步方式发送请求：

发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

在这里插入图片描述

5.3 AJAX的应用场景

ajax的应用场景很多，常见的应用场景如下：

检查用户名是否已经被注册

很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。
检索框输入，会有下拉框提示
该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，显示模糊查询后的提示词。

6 js原生的ajax（实际使用JQuery的ajax开发，了解）

6.1 ajax工作原理图

在这里插入图片描述
tips：
浏览器内置ajax引擎：实现异步请求，依靠ajax引擎，一切都是对象，引擎也封装成为对象XMLHttpRequest对象

6.2 js原生的ajax的开发步骤

1）创建XMLHttpRequest对象

2）向服务器发送请求, 并绑定提交地址与参数

3）设置onreadystatechange事件, 用于为Ajax引擎对象绑定监听（监听服务器已将数据响应给ajax引擎）

4）获取服务器响应返回给引擎对象的数据

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>原生态的AJAX程序</title>

    <script type="text/javascript">
        function fn() {
            /**
             * 实现 JavaScript异步请求
             *
             * 1）创建XMLHttpRequest对象

             2）向服务器发送请求, 并绑定提交地址与参数

             3）设置onreadystatechange事件, 用于为Ajax引擎对象绑定监听（监听服务器已将数据响应给ajax引擎）

             4）获取服务器响应返回给引擎对象的数据
             */

                //创建ajax引擎对象, new XMLHttpRequest()
            var xmlhttp = new XMLHttpRequest();
                    //引擎对象.调用事件,监听ajax的引擎的状态变化
                    //引擎状态有变,可以监听到,调用匿名函数
                    xmlhttp.onreadystatechange=function()
                    {
                        //引擎状态码 4 请求完成,等待响应    状态200响应成功
                        if (xmlhttp.readyState==4 && xmlhttp.status==200)
                        {
                            //获取div.设置div的标签体, xmlhttp.responseText;引擎的属性,的属性值就是服务器响应回来的数据
                            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            //引擎,发生请求,方法 open
            xmlhttp.open("GET","/ajax");
            xmlhttp.send(null);
        }
    </script>
</head>
<body>
  <input type="button" value="异步请求" onclick="fn()">

  <div id="myDiv"></div>
</body>
</html>

6.3 XMLHttpRequest 对象

现代所有浏览器均支持 XMLHttpRequest 对象。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

var xmlhttp = new XMLHttpRequest();

6.4 向服务器发送请求, 并绑定提交地址与参数

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

var cname = document.getElementById("cname").value;
xmlhttp.open("GET", "/day14/ajaxServlet?cname="+cname, true);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

6.5 设置onreadystatechange事件, 用于为Ajax引擎对象绑定监听（监听服务器已将数据响应给ajax引擎）

当请求被发送到服务器时，我们需要执行一些基于响应的callback()任务。

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

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

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

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

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange = function(){
    if (xmlhttp.status == 200 && xmlhttp.readyState == 4){
        //document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
};

6.6 获取服务器响应返回给引擎对象的数据

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

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML = xmlhttp.responseText;