Ajax当中给出一个helloWorld例子

本文介绍了一个简单的HelloWorld实例,使用JavaScript实现AJAX请求,演示了如何创建XMLHttpRequest对象,并通过GET方式从服务器请求数据,展示了如何处理请求状态变化及响应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.helloWorld


例 1.1(testIEFF.htm)


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>helloworld</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
    if(window.ActiveXObject){//ie
        alert("we are using microsoft ActiveXObject");
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
}

function startRequest(){

    createXMLHttpRequest();
/*
马克-to-win:onreadystatechange: 指定当readyState属性改变时的事件处理句柄

  每当XMLHttpRequest状态改变时,onreadystatechange事件就触发,
actually, the next statement won't be immidiately executed, it just determine that when the status
changes, it will run handleStateChange.
  */
    xmlHttp.onreadystatechange = handleStateChange;
/* open()的第一个参数是HTTP请求方式 GET, POST, HEAD 或任何服务器所支持的您想调用的方式.
马克-to-win: it will go to the same webmodule to get "servlet", or
you can xmlHttp.open('GET', 'http://www.example.org/some.file', true);
第二个参数是请求页面的URL. 第三个参数设置请求是否为异步模式.如果是TRUE, JavaScript函数将继续执行,而不等待服务器响应.
这就是"AJAX"中的"A".
*/
/*下面两句都可以工作,但1.txt处理不了中文,下面参数q不能为中文    */
    xmlHttp.open("GET","servlet11?q=mark",true);
// xmlHttp.open("GET","1.txt",true);
/*如果第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式
送给服务器,如下所示: name=value&anothername=othervalue&so=on
*/
    xmlHttp.send(null);
}
function handleStateChange(){
/*
马克-to-win:readyState: 返回XMLHTTP请求的当前状态
变量,此属性只读,状态用长度为4的整型表示.定义如下:

0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通responseText获取完整的回应数据
*/
    if(xmlHttp.readyState == 4){
/*
status: 长整形标准http状态码,此属性仅当数据发送并接收完毕后才可获取。定义如下: Number  Description
500 Internal Server Error
200 OK
404 Not Found
504 Gateway Timeout
*/
        if(xmlHttp.status == 200){//成功得到请求内容
            var tex=xmlHttp.responseText;
            alert(tex);
            document.getElementById("results").innerHTML = tex;
        }
    }
}
</script>
</head>
<body>
<form>
    <input type="button" value="Start info Request" onClick="startRequest();" />
</form>
<hr>
以下是请求内容:
<div id="results"></div>
</body>
</html>

更多请看下节:https://blog.youkuaiyun.com/qq_43650923/article/details/103050696

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mark_to_win

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值