<!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. CODE FESTIVAL 2017 qual C 题解

    传送门 \(A\) 咕咕 const int N=15; char s[N];int n; int main(){ scanf("%s",s+1),n=strlen(s+1); f ...

  2. 利用HTML和CSS设计一个静态的“小米商城官网首页”

    一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...

  3. Spark-Hadoop、Hive、Spark 之间是什么关系？

    作者:Xiaoyu Ma链接:https://www.zhihu.com/question/27974418/answer/38965760来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商 ...

  4. encode（编码）和decode（解码）方法

    JS对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

  5. 常用spaceclaim脚本（二）

    #创建一个草图 #第一个参数传入一个Frame对象 #通过一个点和两个向量创建Frame #Frame的类成员函数Create被重载 #重载函数1:Frame.Create(Point, Direct ...

  6. Zrender：实现波浪纹效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. HTML中各标签对应的英文意思

    HTML中各标签对应的英文意思 一.总结 一句话总结: 结合标签的英语全称,可以更加方便的知道标签的意思 二.HTML中标签对应的英文(方便理解记忆)(转自) 转自:HTML中标签对应的英文(方便理解 ...

  8. JVM 数组创建的本质

    1.创建数组 创建一个MyParent4[] 数组 public class MyTest4 { public static void main(String[] args) { MyParent4[ ...

  9. python-pptx

    python-pptx的使用首先需要了解几个基本概念: 1.引入python-pptx frompptximportpresentation    # 实例化Presentation    prs= ...

  10. Mac OS docker挂载文件夹

    sudo docker run -p 3306:3306 --name mysql -v /var/run/docker.sock:/var/run/docker.sock -v ~/mysql/co ...