Ajax发起对服务器的请求

清疚 2022-05-20 04:52 198阅读 0赞

**![70][]**

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

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

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

![70 1][]

![70 2][] ![70 3][]

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

![70 4][]

#  #

# 二、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>

浏览器端页面如下：

![70 5][]

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

![70 6][]

![70 7][]

# 总结： #

#### 第一、创建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);

[70]: /images/20220520/4d263545397d4030abd4f50c478e54a9.png
[70 1]: /images/20220520/a6a59bb588b54ba6ab64870aac58dca9.png
[70 2]: https://img-blog.csdn.net/20180712164339347?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RGRjE5OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220520/7d1fd71393f9415caefdbed4ccd98d85.png
[70 4]: /images/20220520/ca4fb0b1b274403992d72a9976bc4cd0.png
[70 5]: /images/20220520/3a981c5d7a5644a3b4ce25d3a4ee323f.png
[70 6]: /images/20220520/a2602020272647aa8ab60002892b23d4.png
[70 7]: /images/20220520/6ff22d4ba93843e7942bd8e692824be2.png