<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

            <title>ajaxѧϰ</title>

            <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>

            <script type="text/javascript">

                var xmlHttp;

                function createXMLHttpRequest(){

                    if(window.XMLHttpRequest){

                        //for IE7+,Firefox,Chrome,Opera,Safari

                        xmlHttp = new XMLHttpRequest();

                    }else{

                        //for IE6,IE5

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

                    }

                }

                function start0Request(){

                    createXMLHttpRequest();

                    //open(method,url,async)

                    //规定请求的类型、URL 以及是否异步处理请求。

                    //method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

                    xmlHttp.open("get","http://m.weather.com.cn/data/101100101.html",false);

                    xmlHttp.send();

                    var result = xmlHttp.responseText;

                    alert(result);

                    document.getElementById("weatherID").innerHTML = "";

                    document.getElementById("weatherID").innerHTML = result ;

                }

                function start1Request(){

                    createXMLHttpRequest();

                    xmlHttp.open("get","http://m.weather.com.cn/data/101100101.html",true);

                    document.getElementById("weatherID").innerHTML = "";

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

                    //readyState    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

                    //0: 请求未初始化    1: 服务器连接已建立    2: 请求已接收    3: 请求处理中    4: 请求已完成，且响应已就绪

                    //status    200: "OK"    404: 未找到页面

                    xmlHttp.onreadystatechange = function(){

                        if(4 == xmlHttp.readyState && 200 == xmlHttp.status){

                            var result = xmlHttp.responseText;

                            document.getElementById("weatherID").innerHTML = result ;

                        }

                    }

                    xmlHttp.send();

                }

            </script>

    </head>

    <body>

        <input type="button" value="ajax同步" onclick="start0Request()"/>

        <input type="button" value="ajax异步" onclick="start1Request()"/>

        <div id="weatherID"></div>

    </body>

</html>

简单的使用Ajax，多多指教！谢谢！

简单的Ajax例子的更多相关文章

  1. struts2框架下的一个简单的ajax例子

    举个例子 jsp页面: <%@ page language="java" import="java.util.*" pageEncoding=" ...

  2. DOM编程艺术章12：一个简单的Ajax例子

    大概入了JavaScript的门,现在要回过头恶补Ajax和json了,随手翻到dom编程艺术发现有一个适合回忆的例子,先抄录下来,引入对Ajax作用的大概印象,再去掰开了研究. <!DOCTY ...

  3. 原生javascript和jquery实现简单的ajax例子

    后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/p ...

  4. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

  5. 利用jQuery与.ashx完成简单的Ajax

    在ASP.NET同样可以与其它编程语言一样,利用前台的Ajax技术,只是需要注意的是,后台的处理程序不再是一个aspx页面中的Page_Load,而且ASP.NET独有的“一般处理程序”.ashx,下 ...

  6. Ajax例子，views返回，html接收数据

    Ajax例子,views返回,html接收数据 views from django.shortcuts import render,HttpResponse,render_to_response im ...

  7. 一个简单的CORBA例子

    因为对CORBA分析的需要,这里写一个简单的CORBA例子.从JDK1.2开始,JDK中集成了ORB的实现,本例子使用了JDK1.7,对于JDK1.2+应该都没有问题.这个例子实现一个简单的加减乘除的 ...

  8. 菜鸟学习Hibernate——简单的一个例子

    一.Hibernate开发. 上篇博客已经为大家介绍了持久层框架的发展流程,持久层框架的种类. 为了能够使用Hibernate快速上手,我们先讲解一个简单的Hibernate应用实例hibernate ...

  9. 轻松创建nodejs服务器（1）：一个简单nodejs服务器例子

    这篇文章主要介绍了一个简单nodejs服务器例子,本文实现了一个简单的hello world例子,并展示如何运行这个服务器,需要的朋友可以参考下   我们先来实现一个简单的例子,hello world ...

随机推荐

  1. scala学习笔记：理解stream和view

    先来个正常的: scala> (0 to 5).map((x:Int)=>{println(x);x*2}).foreach(println) 0 1 2 3 4 5 0 2 4 6 8 ...

  2. c# 单例模式[Singleton]之深夜闲聊

    都有点记不起认识单例模式(也有叫单件模式的)是在什么时候了,有时候东西认多了不常用的话也经常抛之脑后甚至逐渐从大脑里被移除.不闲扯了,直接入正题吧. 什么是单例模式? 保证在整个应用程序的生命周期中, ...

  3. Linux中的版本控制---diff和patch命令

    一.构造两个用于测试的文件 hello.txt: world.txt: 二.用diff命令比较两个文本文件的差异 对这个两个文本文件执行diff‘命令,并通过输出重定向,将差异保存在diff.txt文 ...

  4. ###学习《C++ Primer》- 3

    点击查看Evernote原文. #@author: gr #@date: 2014-10-04 #@email: forgerui@gmail.com Part 3: STL泛型算法(第10章) 一. ...

  5. 第七篇、CSS3新增属性

    <!-- 1.透明度 opacity(设置不透明度):0.2: --rgba --background-color:rgba(255,0,0,0.8); 2.块阴影和圆角阴影 --box-sha ...

  6. 让C# Excel导入导出，支持不同版本的Office

    问题:最近在项目中遇到,不同客户机安装不同Office版本,在导出Excel时,发生错误. 找不到Excel Com组件,错误信息如下. 未能加载文件或程序集“Microsoft.Office.Int ...

  7. HDOJ 1422 重温世界杯 -- 动态规划

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1422 Problem Description 世界杯结束了,意大利人连本带利的收回了法国人6年前欠他们 ...

  8. JS的词法作用域

    词法作用域定义实现的规则: 1 函数作用域实在定义的时候决定的,而不是在执行时候决定 2 为了实现这种词法作用域,函数内部不仅包含函数代码逻辑,还必须引用当前的作用域链. 3 函数对象可以通过作用域链 ...

  9. new static() 和 new self() 的区别异同

    长夜漫漫啊! 今天领导本地搭建一个站.发现用PHP 5.2 搭建不起来,站PHP代码里面有很多5.3以上的部分,领导让苦逼我更改在5.2下能运行. 改着改着发现了一个地方 return new sta ...

  10. ajax返回json处理

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. (一)以jquery异步获取的数据类型--json ...