详解AJAX与GET请求-优快云博客

本文链接：https://blog.youkuaiyun.com/Shellin_F/article/details/79283563

先说ajax请求

我之前一直理解的ajax都是我用的JQuery完成的，一个$.get();就完事，总是不会考虑那么多，后来面试都是原生AJAX，记忆在一次次的被问到混乱后，看一下，又混乱。现在好好再重新看看，不多BB了。

ajax的概念就懒得说了，一搜一大堆：AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

AJAX是可以实现异步请求的，在这之前是：

<form action="doGet.php" method="GET">

这样实现的，但是这个是同步的，在获得返回值后，会立即刷新页面，这样不好，为什么不好，不解释。

过程：

创建xhr对象

xhr.open(url,patrh,true);

xhr.send();

xhr.onreadystatechange=function(){}

这是基本过程，在post和get请求中，有点不同。

接下来是get请求的例子：

get请求就向服务端的请求信息携带在url中，即：

doGet.php?username="+username+"&sex="+sex

服务端使用$_GET["XX"];的方式获取，即：

 $username = $_GET["username"];

具体实现如下：

我是在本地用wamp搭建了本地服务器，其中，含有ajax脚本的html文件必须在服务端打开

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="doGet.php" method="GET">
		<p>
			姓名:<input type="text" name="username" id="username">
		</p>
		<p>
			性别:
			    <input type="radio" name=
			    "sex" value="男" id="nan" checked/>男
			    <input type="radio" id="nv" name="sex" value="男" />女
		</p>
		<p>
			爱好:
			    <input type="checkbox" name="hobby" id="" value="足球">足球
			    <input type="checkbox" name="hobby" id="" value="篮球">篮球
			    <input type="checkbox" name="hobby" id="" value="羽毛球">羽毛球
		</p>
		<p>
			你的留言
			<textarea name="liuyan" rows="10" cols="30"></textarea>
		</p>
		<p>
			<input type="button" id="btn" value="点我提交">
		</p>
	</form>
	<div></div>
	<script type="text/javascript">
	    var btn = document.getElementById("btn");
           btn.onclick = function() {
        	var username = document.getElementById("username").value;
        	var sex = document.getElementById("nan").checked?"男":"女";
        	alert(sex);
        	// 创建对象
        	var xhr = getXMLHTTPRequest();
           // 准备请求动作
              xhr.open("get","doGet.php?username="+username+"&sex="+sex,true);     

           // 发送
              xhr.send(null);
           // 回调
              xhr.onreadystatechange = function() {
              	  //console.log("状态"+xhr.readyState);
              	  if(xhr.readyState == 4) {
              	  	    if(xhr.status == 200) {
              	  	    	 console.log(xhr.responseText); 
              	  	    }
              	  }
              }

        }
    
        function  getXMLHTTPRequest() {
              if(window.XMLHttpRequest) {
                   return new XMLHttpRequest();
              } else {
                  return new ActiveXObject("Microsoft.XMLHTTP");
              }
        }    
	</script>
</body>
</html>

php文件:

<?php
   // 得到姓名
    $username = $_GET["username"];
    // 得到sex
    $sex = $_GET["sex"];

    echo "已经收到".$username.$sex;

?>

ajax get请求