Ajax 入门Demo

最新推荐文章于 2022-10-06 11:44:40 发布
最新推荐文章于 2022-10-06 11:44:40 发布
阅读量283 收藏 1
点赞数
分类专栏： javaScript & ajax 文章标签： Ajax JavaScript 浏览器 PHP HTML ViewUI 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Ajax 入门简介 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

<script language="javascript" type="text/javascript">
//将下面js代码贴到此位置 
</script>
 </HEAD>
 <BODY>
	<button οnclick="callServer();">测试</button>
	<div id="show"></div>
 </BODY>
</HTML>

 

js代码：

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	
  } catch (e2) {
    xmlHttp = false;
  }
}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

function callServer() {
  // Build the URL to connect to
  //var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  var url="test.html";
  // 连接到服务url
  xmlHttp.open("GET", url, true);
  // 设置回调方法
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}
//回调方法
function updatePage() {
	//如果解析已经完成
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("show").innerText = response;
  }
}

 

 readyState的五种状态

 

(0)未初始化
 此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
 
(1)载入
 此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
 
(2)载入完成
 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
 
(3)交互
 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
 
(4)完成
 此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

hou_jian_yong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
探讨Ajax中有关readyState（状态值）和status（状态码)的问题
10-22
主要介绍了探讨Ajax中有关readyState（状态值）和status（状态码)的问题的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
ajax 获取return返回值
juziaixiao的博客
07-23 2790
/** 方式：（1）同步调用 （2）在ajax函数体里面return值 结果：返回 1。未成功获取返回值 失败原因：ajax内部是一个或多个定义的函数，ajax中return返回值， 返回到ajax定义函数，而不是返回到ajax外层的函数checkAccount1() */ function checkAccount1(){ var result = 1; $.ajax({ url : 'test.do', type : "post
readyState与status的几种状态
qq_44242084的博客
10-25 4580
什么是readyState readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。 readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义，如下表所示： 　　 0 未初始化状态：此时，已经创建了一个XMLHttpRequest对象 1 准备发送状态：此时，已经调用了XMLHttpRequest...
【前端】Ajax方法获取返回值
Hurpe
08-30 7379
接口返回值： { "message": "put successful", "data": { "num_22": 7, "num_27": 1, "num_2": 3, "num_30": 5 }, "success": "true" } ajax中几个重点 重点都卸载备注里面了 $.ajax({ type: "POST", //提交方式 url: BASE + "/sendHist
ajax 返回数据要求,ajax返回数据
weixin_35760923的博客
08-05 1055
在使用远程js验证检测账户是否存在时，直在发请求后返回值无效，怎样把值返回回来呢重点注意两点第一点：type不能省略，不能是异步，async: false第二点：不能在直接请求成功后返回var res;$.ajax({type: "POST",async: false,url: '@Url.Content("~/SysManager/UserInfo/IsSameWithOldPassword/?...
ajax入门demo
04-24
ajax入门demo
AJAX入门DEMO
01-17
这是本人刚弄懂怎么用AJAX时写的一个DEMO，很简单，但是其中很详细的讲了AJAX的原理，希望可以帮到和我一样的新人（内附个人对AJAX的一些浅见）
Ajax 入门demo
05-27
Ajax 入门demo JavaScript 原生Ajax demo Jquery ajax demo
java web ajax 入门Demo 百度 Google 搜索 提示 ajax 模糊查询
03-15
原创 百度 Google 搜索 提示 ajax 模糊查询 JavaScript jsp 最简单的Demo。 用记事本仿数据库中的数据，输入一个字后，会自动加载匹配的信息。有动态效果。
Ajax相关的一些入门代码demo
04-13
Ajax相关的一些入门代码demo
AJAX返回值
LemonsDemoZ的博客
08-04 530
AJAX返回值应用场景 1. 字符串: 短字符串: 应用场景: 一般返回较短,具有标志的字符串,如,0/1, succ/fail, 已注册,未注册等. function chk() { var xhr = new XMLHttpRequest(); var uri = '01.php?username=' + document.getEle...
readyState的五种状态详解
huali_1995的博客
08-23 4458
0 － （未初始化）还没有调用send()方法  1 － （载入）已调用send()方法，正在发送请求  2 － （载入完成）send()方法执行完成，已经接收到全部响应内容  3 － （交互）正在解析响应内容  4 － （完成）响应内容解析完成，可以在客户端调用了 readyState有五种可能的值： 0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有
WebSocket理解与应用
m0_64023259的博客
10-06 1324
websocket是一个网络传输协议，可以在单个tcp连接上进行全双工通信，位于OSI7层网络模型（物理层、数据链路层、网络层、传输层、会话层、表示层、应用层）中的应用层
Ajax返回值类型
webbc的博客
10-10 6441
Ajax返回值类型主要有XML类型和文本类型，其中文本类型又可以分为HTML、json类型等。1、返回值之XML类型 如果服务器的响应头中Content-type的内容为text/xml时，此时XMLHttpRequest对象的responseXML属性才能使用。2、返回值之文本类型 文本类型主要分为Html类型和json类型。 （1）Html类型 使用场景：一般返回需要重复复杂的操作。比如
WebSocket协议解析
weixin_30372371的博客
12-22 293
WebSocket协议解析 转载请注明出处：WebSocket解析 现在，很多网站为了实现推送技术，所用的技术都是轮询。轮询是指在特定的时间间隔(如每一秒)，由浏览器对服务器发起HTTP请求，然后由服务器返回数据给浏览器 。由于HTTP协议是惰性的，只有客户端发起请求，服务器才会返回数据。轮询技术实现的前提条件同样是基于这种机制。而WebSocket属于服务端推送技术，本质是一种应用层协议，可以实...
AJAX三种返回值方式
weixin_30521649的博客
06-26 180
（一）TEXT方式 该方式返回的是拼接字符串，想要取到其中的值，需要先将返回值进行拆分 （二）JSON方式 该方式返回的是数组，想要取到其中的值，可用索引项进行提取 （三）XML方式 XML：可扩展标记语言，传输数据HTML：超文本标记语言，显示数据 XML：标签构成特点：1.标签名可以自定义2.必须有一个根（有且只有一个）3.有开始标签就必须有结束标签4.大小写敏感 5.可以用建标...
jquery中ajax()参数及其返回值总结
热门推荐
莫不静好
05-06 2万+
定义和用法 ajax() 方法用于执行 AJAX（异步 HTTP）请求 语法 注意： - 下面关于ajax 的 async:false/true的作用整理下 　　async.默认是 true，即为异步方式，.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发.ajax执行后，会继续执行...
AJAX请求时status返回状态明细表
06-24 661
AJAX请求时status返回状态明细表 readyState的五种状态2010-03-04 18:24对于readyState的五种状态的描述或者说定义，很多Ajax书（英文原版）中大都语焉不详 在《Pragmatic Ajax A Web 2.0 Primer 》中偶然看到对readyStae状态的介绍，感觉这个介绍很实在…… 比较理想的解释方法应该以“状态：任务（目标）+过程+表现（...
ajax入门
最新发布
05-27
Ajax（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术，通过在不重新加载整个页面的情况下，与服务器异步交换数据，实现页面的部分更新。 以下是入门步骤： 1. 创建 XMLHttpRequest 对象（浏览器内置对象）： ```javascript var xmlhttp = new XMLHttpRequest(); ``` 2. 发送请求（使用 GET 或 POST 方法）： ```javascript xmlhttp.open("GET", "url", true); xmlhttp.send(); ``` 3. 监听状态变化： ```javascript xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 处理响应数据 var responseText = xmlhttp.responseText; } } ``` 4. 处理响应数据： ```javascript var responseText = xmlhttp.responseText; ``` 以上是基本的 Ajax 流程，可以通过处理响应数据来更新页面内容，实现动态效果。在实践中，还需注意跨域问题、数据格式等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值