Ajax发起对服务器的请求

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

杜小白Zero

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

阅读量382

点赞数

分类专栏： AJAX 文章标签： ajax发起服务器请求 open() send()

本文链接：https://blog.csdn.net/DFF1993/article/details/81018058

版权

AJAX 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、服务器端逻辑：给文件追加内容

<?php

$fp = fopen("./01.txt", "a"); //追加方式打开01.txt文件（文件不存在会自动创建）
fwrite($fp, "ajax发起对服务器的请求"); //给文件写内容
fclose($fp); //关闭文件

在浏览器中输入以下网址访问服务器端01.php文件，页面中没有内容，但是在当前01.php文件目录下会生成一个01.txt文件，如下：

可以看到每访问一次，就会执行内容追加：

二、ajax向服务器端发送请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax发起对服务器端的请求</title>
	<script type="text/javascript">
		function f1(){
			//利用ajax去请求01.php服务器端页面
			
			//第一、创建ajax对象
			var xhr;
			if(window.XMLHttpRequest){
				//IE7+，Firefox，chrome，Opera，Safari浏览器执行代码
				xhr = new XMLHttpRequest();
			}else{
				//IE6，IE5浏览器执行代码
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//浏览器方式请求：打开浏览器、输入请求地址、敲回车发送请求
			//第二、创建新的http请求（并设置请求地址）
			//    open（请求方式get/post，url请求地址）
			xhr.open('get', './01.php');
            
                       //第三、发送请求
                       //    send（get-null/post-给服务器传递的信息）
                       xhr.send(null);
        }
	</script>
</head>
<body>
	<h2>ajax发起对服务器端的请求</h2>
	<input type="button" value="触发" οnclick="f1()">
</body>
</html>

浏览器端页面如下：

点击“触发”按钮，会发起对服务器端的请求，执行往01.txt中追加内容的操作（在上述服务器端操作清空的基础上新追加的内容）
可以看到，点击四次“触发”按钮，即发起四次ajax请求，会执行四次内容追加的操作：

总结：

第一、创建ajax对象

       var xhr;
	if(window.XMLHttpRequest){
	//IE7+，Firefox，chrome，Opera，Safari浏览器执行代码
		xhr = new XMLHttpRequest();
	}else{
	//IE6，IE5浏览器执行代码
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}

第二、创建新的http请求（并设置请求地址）

       //    open（请求方式get/post，url请求地址）
	xhr.open('get', './01.php');

第三、发送请求

     //    send（get-null/post-给服务器传递的信息）
     xhr.send(null);

杜小白Zero

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录