ajax请求服务器端数据

最新推荐文章于 2023-06-27 11:36:36 发布

soosgo

最新推荐文章于 2023-06-27 11:36:36 发布

阅读量289

点赞数

分类专栏： PHP Javascript jQuery

本文链接：https://blog.csdn.net/Doulvme/article/details/114284312

版权

Javascript 同时被 3 个专栏收录

50 篇文章 0 订阅

订阅专栏

jQuery

21 篇文章 0 订阅

订阅专栏

PHP

18 篇文章 1 订阅

订阅专栏

ajax对象的属性和方法：
           属性：
           responseText以字符串形式获取服务器端返回信息
           readyState ajax对象状态（0 1 2 3 4）
           0-->对象创建
           1-->有调用open方法
           2-->有调用send方法
           3-->服务器返回数据（但是数据没有返回完全）
           4-->数据返回完毕 ajax请求完成
           onreadystatechange事件该事件可以感知ajax对象状态readyState的变化
           方法：
           open()创建一个新的http请求
           send()把http请求发送给服务器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function f1(){
				//1.创建ajax
				if(new XMLHttpRequest()){
					var xmlhttp=new XMLHttpRequest();
				}else{
					var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//对象创建完毕之后设置onreadystatechange事件
				//可以最大化感知状态信息
				xmlhttp.onreadystatechange=function(){
					//console.log(xmlhttp.readyState);
					if(xmlhttp.readyState==4&&xmlhttp.status==200){
						//alert(xmlhttp.responseText);
                        //var data=JSON.parse(xmlhttp.responseText);//转化为json
						document.getElementsByTagName('div')[0].innerHTML=xmlhttp.responseText;
					}
				}
				//2.创建http请求
				xmlhttp.open("get","demo04response.php");
				//3.发送请求
				xmlhttp.send();
				
			
			}
		</script>
	</head>
	<body>
		<h2>ajax接收服务器返回的信息</h2>
		<input type="button" name="" id="" onclick="f1()" value="触发" />
		<div></div>
	</body>
</html>

服务器端文件demo04response.php:

<?php
echo "<span style='color:red;'>this is server back info</span>";
?>

点击按钮效果如下：

soosgo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax请求服务器端数据

ajax对象的属性和方法：属性： responseText以字符串形式获取服务器端返回信息 readyState ajax对象状态（0 1 2 3 4） 0-->对象创建 1-->有调用open方法 2-->有调用send方法 3-->服务器返回数据（但是数据没有返回完全） ...
复制链接

扫一扫