<!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. Pytest权威教程01-安装及入门

    目录 安装及入门 安装 Pytest 创建你的第一个测试用例 执行多条测试用例 断言抛出了指定异常 使用类组织多条测试用例 函数测试中请求使用独立的临时目录 进一步阅读 返回: Pytest权威教程 ...

  2. 如何查询数据库中所有表格，或者查询是否存在某个表格-mysql和oracle

    这个问题,在之前就有写过,但是想找到语句还是记不得,这里主要提及我自己有用到的数据库mysql和oracle 1.mysql 这个是自己安装的,所有配置都是默认配置没有改变,所以保存表名的表还是inf ...

  3. linux 查看文件内容的几种命令

    cat #将文件内容输出到屏幕head #查看文件开头N行tail #查看文件末尾N行tailf #动态的查看的写入,有写入时屏幕输出vim.vi #文件编辑器,也可以当是查看文件{进入文件}grep ...

  4. C# 常用日期取得

    列举一下常用的日期取得方法 static class DateTimeDemo { public static DateTime FirstDayOfMonth(this DateTime value ...

  5. laravel文件存储、删除、移动等操作

    laravel文件存储.删除.移动等操作 一.总结 一句话总结: 启示:可以在操作遇到问题的时候,找文档找实例好好实验一下,也就是学习巩固一下,不必一定要死纠排错 1.laravel文件删除注意? 1 ...

  6. cookie 的HttpOnly 和 Secure 属性

    设置HttpOnly=true的cookie不能被js获取到,无法用document.cookie打出cookie的内容. Secure属性是说如果一个cookie被设置了Secure=true,那么 ...

  7. rockchip 硬解码相关

    http://opensource.rock-chips.com/wiki_Mpp MPP You can get mpp source from git. git clone -b release ...

  8. 基于 Binlog + Flink 实现多表数据同构/异构方案

    https://mp.weixin.qq.com/s/1h942YAcS6fhO5C43hGX-w 什么是数据异构?简单讲,就是将数据进行异地数据异构存储. 数据异构 服务市场使用 BinLake(京 ...

  9. MySQL 正则(Regular Expression) 邮箱(Email)

    MySQL 正则表达式 | 菜鸟教程https://www.runoob.com/mysql/mysql-regexp.html (1条消息)常用正则表达式—邮箱(Email) - Samuel - ...

  10. c++ 标准 字符串转换为时间 时间大小比较 判断有效期 简洁办法

    c# php delphi java 等各种语言 对字符串转换为日期 然后与当前日期进行比较 是非常容易的 因为有现成的函数可用 标准 c++ 硬是找不到 合适的代码可用 于是 百度了很多 没百出个结 ...