<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function a(){

    /* ----------------------------------------------- */

    var xmlhttp;

if (window.XMLHttpRequest)

{

    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

    xmlhttp=new XMLHttpRequest();

}

else

{

    // IE6, IE5 浏览器执行代码

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

    /* ----------------------------------------------- */

/* 

*   1、创建引擎对象

*   2、复写 jonreadystatement函数

*

*   3、发送请求

*   4、获取元素对象

*

*/

xmlhttp.onreadystatechange=function(){//声明式调用

    //获取响应

    var result=xmlhttp.responseText;

    var showdiv=document.getElementById("showdiv");

    showdiv.innerHTML=result

}

xmlhttp.open("get","http://localhost:8080/test1")

xmlhttp.send(null)

}

</script>

<style type="text/css">

    #showdiv{

        border:solid 1px;

        width:200px;

        height:100px

         }

</style>

</head>

<body>

   <h3>欢迎登陆403峡谷</h3>

   <input type="button" value="测试" onclick="a()">

    <div id="showdiv"></div>

</body>

</html>
是
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function a(){

    /* ----------------------------------------------- */

    var xmlhttp;

if (window.XMLHttpRequest)

{

    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

    xmlhttp=new XMLHttpRequest();

}

else

{

    // IE6, IE5 浏览器执行代码

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

    /* ----------------------------------------------- */

/* 

*   1、创建引擎对象

*   2、复写 jonreadystatement函数

*

*   3、发送请求

*   4、获取元素对象

*

*/

xmlhttp.onreadystatechange=function(){//声明式调用

    //获取响应

    var result=xmlhttp.responseText

    if(xhlthhp.readState==4){

          if(xmlhttp.status==200){

            var showdiv=document.getElementById("showdiv");

            showdiv.innerHTML=result

          }

          if(xmlhttp.status==404){

                      var showdiv=document.getElementById("showdiv");

                      showdiv.innerHTML="页面不存在"

          }

          if(xmlhttp.status==500){

                      var showdiv=document.getElementById("showdiv");

                      showdiv.innerHTML="服务器繁忙"

          }

       } 

}

xmlhttp.open("get","http://localhost:8080/test1")

xmlhttp.send(null)

}

</script>

<style type="text/css">

    #showdiv{

        border:solid 1px;

        width:200px;

        height:100px

         }

</style>

</head>

<body>

   <h3>欢迎登陆403峡谷</h3>

   <input type="button" value="测试" onclick="a()">

    <div id="showdiv"></div>

</body>

</html>

Ajax的基本使用流程的更多相关文章

  1. AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  2. .net学习之Session、Cookie、手写Ajax代码以及请求流程

    1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...

  3. js.ajax优缺点，工作流程

    1.ajax的优点 Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点: 1.最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.  2.使用异步方式与服务器通信,不 ...

  4. jQuery-1.9.1源码分析系列（十六）ajax——ajax处理流程以及核心函数

    先来看一看jQuery的ajax核心处理流程($.ajax) a. ajax( [url,] options )执行流程 第一步,为传递的参数做适配.url可以包含在options中 //传递的参数只 ...

  5. ajax基础学习

    AJAX即"Asynchronous JavaScript and XML",意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己 ...

  6. 快速理解-Ajax

    AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己手动写AJAX,大多 ...

  7. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  8. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. Ajax学习(1)-简单ajax案例

    1.什么是Ajax? Ajax是Asynchronous JavaScript and XML 的缩写,即异步的Javascript和XML. 可以使用Ajax在不加载整个网页的情况下更新部分网页信息 ...

随机推荐

  1. [mysql8]新坑哈 更改Mysql 表的大小转换设置lower_case_table_names=1

    在安装了8.0.14之后,初始化的时候在my.cnf里设置了lower_case_table_names=1,安装好了之后,启动报错: 1 2 3 4 5 2019-01-28T13:24:24.91 ...

  2. 微信小程序 长按文字复制与按钮复制

    1. 长按文字复制 当要实现长按文字进行复制的时候,需要使用text标签,并将selectable属性设置为true <text class='url-txt' selectable='true ...

  3. WAMP本地环境升级php版本操作步骤（详细）

    php版本下载地址:http://windows.php.net/download/ 步骤:下载php版本-解压文件-放到bin/php目录下-更改文件 图片教程: 更改文件内容: 1.从已存在的ph ...

  4. spring boot 之注册

    注册数据库 使用spring boot 之登录笔记  的数据库 在server 层 User create(String username, String password, String email ...

  5. 【软工实践】Alpha冲刺（3/6）

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 对推送模块进行详细划分 基于用户的协同过滤,寻找更感兴趣的话题 学习API文档 ...

  6. html5中hgroup和address标签使用总结

    html5中hgroup和address标签使用总结 一.总结 一句话总结: hgroup元素(不推荐使用):用来给标题分组,通常放在header中: address元素:斜体显示:用来说明作者的联系 ...

  7. Dynamic Filter Networks

    Dynamic Filter Networks 2019-06-10 11:29:19 Paper:http://papers.nips.cc/paper/6578-dynamic-filter-ne ...

  8. 效率包括了代码的GC 大小与内存大小，执行速度等等。其中执行速度不是关注 的重点

    效率包括了代码的GC 大小与内存大小,执行速度等等.其中执行速度不是关注的重点

  9. 在linux的用户空间操作gpio

    1. 使能linux内核选项CONFIG_GPIO_SYSFS CONFIG_GPIO_SYSFS=y 2. 测试方法 2.1 关注/sys/class/gpio下的文件 --export/unexp ...

  10. shell编程系列13--文本处理三剑客之sed利用sed追加文件内容

    shell编程系列13--文本处理三剑客之sed利用sed追加文件内容 追加用法总结: .a 在匹配行后面追加 .i 在匹配行前面追加 .r 将文件内容追加到匹配行后面 .w 将匹配行写入指定文件 追 ...