使用Ajax发送http请求（get&post请求）

时间 2020-08-03

标签使用 ajax 发送 http 请求 get&post post 栏目 Ajax 繁體版

原文原文链接

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一块儿入门和进阶前端。javascript

如下是正文。php

同步和异步

同步和异步的概念

同步：必须等待前面的任务完成，才能继续后面的任务。html
异步：不受当前任务的影响。前端

拿排队举例：java

同步：在银行排队时，只有等到你了，才可以去处理业务。git
异步：在排队的时候，能够玩手机。github

异步更新网站

咱们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS之后，网站的内容就固定了。若是想让网站内容发生更改，就必须刷新页面才可以看到更新的内容。web

可若是用到异步更新，状况就大为改观了。好比，咱们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮咱们加载更多的微博，同时页面并无刷新。ajax

试想一下，若是没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太很差了。json

web前端里的异步更新，就要用到 Ajax。

Ajax

Ajax 的概念

在浏览器中，咱们能够在不刷新页面的状况下，经过ajax的方式去获取一些新的内容。

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并非凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。

发送 Ajax 请求的五个步骤

其实也就是使用 XMLHttpRequest 对象的五个步骤。

咱们先回忆一下，一个完整的HTTP请求须要的是：

请求的网址、请求方法get/post。
提交请求的内容数据、请求主体等。
接收响应回来的内容。

发送 Ajax 请求的五个步骤：

（1）建立异步对象。即 XMLHttpRequest 对象。

（2）设置请求的参数。包括：请求的方法、请求的url。

（3）发送请求。

（4）注册事件。 onreadystatechange事件，状态改变时就会调用。

若是要在数据完整请求回来的时候才调用，咱们须要手动写一些判断的逻辑。

（5）获取返回的数据。

Ajax 请求：get 请求举例

（1）index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>

<script type="text/javascript">
    // 绑定点击事件
    document.querySelector('#btnAjax').onclick = function () {
        // 发送ajax 请求 须要 五步

        // （1）建立异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。
        ajaxObj.open('get', '02-ajax.php');

        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //若是要在数据完整请求回来的时候才调用，咱们须要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，咱们通常会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 若是可以进到这个判断 说明 数据 完美的回来了,而且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);

                // 修改页面的显示
                document.querySelector('h1').innerHTML = ajaxObj.responseText;
            }
        }
    }
</script>
</body>
</html>

（2）02-ajax.php：

<?php
	echo 'smyhvae';
 ?>

效果以下：

Ajax 请求：post 请求举例

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送put_ajax请求" id='btnAjax'>
<script type="text/javascript">

    // 异步对象
    var xhr = new XMLHttpRequest();

    // 设置属性
    xhr.open('post', '02.post.php');

    // 若是想要使用post提交数据,必须添加此行
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // 将数据经过send方法传递
    xhr.send('name=fox&age=18');

    // 发送并接受返回值
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
</script>
</body>
</html>

XMLHttpRequest 对象详解

咱们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，咱们讲一下注意事项。

发送请求

发送请求的方法：

open(method, url, async);

参数解释：

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

另外还有个方法：（仅用于 POST 请求）

send(string);

POST请求时注意

若是想让像form 表单提交数据那样使用POST请求，就须要使用 XMLHttpRequest 对象的 setRequestHeader()方法来添加 HTTP 头。而后在 send() 方法中添加想要发送的数据：

xmlhttp.open("POST","ajax_test.php", true);

	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

	xmlhttp.send("name=smyhvae&age=27");

onreadystatechange 事件

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）

0: 请求未初始化
1: 服务器链接已创建
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status：

200: "OK"。
404: 未找到页面。

在 onreadystatechange 事件中，当 readyState 等于 4，且状态码为200时，表示响应已就绪。

服务器响应的内容

responseText：得到字符串形式的响应数据。
responseXML：得到 XML 形式的响应数据。

若是响应的是普通字符串，就使用responseText；若是响应的是XML，使用responseXML。

Ajax 传输 XML

XML 语法

XML（Extensible Markup Language）：可扩展标记语言。详细语法能够查看：#。

一、XML声明：

<?xml version="1.0" encoding="UTF-8"?>

第一行的声明，指定了XML版本(1.0)以及使用的编码。

二、自定义标签：

XML中没有默认的标签，全部的标签都是咱们本身已定义的。例如：

<fox></fox>
<name></name>

XML中没有单标签，都是双标签。

三、根节点：

XML中必需要有一个根节点，全部的子节点都放置在根节点下。例如：

<root1>
  <name></name>
</root1>

XML 解析

由于 XML 就是标签，因此咱们能够直接用解析Dom元素的方法解析 XML。

解析过程：

（1）html 部分：（包含 xml ）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <person id='personXML'>
      <name>fox</name>
      <age>18</age>
      <skill>小花花</skill>
  </person>
</body>
</html>

（2）解析 xml：

<script type="text/javascript">
    var xmlObj = document.getElementById("personXML");
    var name = xmlObj.getElementsByTagName('name')[0].innerHTML;

    console.log(name);
</script>

ajax 请求解析xml（举例）

（1）get_xml.php：（里面包含了xml文件）

<?php
	// 设置 返回的为 xml
	header('content-type:text/xml; charset= utf-8');

	// 读取xml文件 并返回
	echo file_get_contents('info/star.xml');

 ?>

上方代码解释：

php 自带了读取 xml 文件的方法。
在 php 中，若是要使用xml传输数据，则须要使用header()设置返回的内容为xml。

（2）get_xml.html：（Ajax 请求，获取并解析xml）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button"  value="获取XMl数据" id='getXML'>
</body>
</html>
<script type="text/javascript">
	document.querySelector('#getXML').onclick = function () {
		var ajax = new XMLHttpRequest();

		ajax.open('get','get_XMl.php');

		ajax.send();

		ajax.onreadystatechange = function () {
			if (ajax.readyState == 4 && ajax.status==200) {
				// 若是 返回的是 xml文件
				console.log(ajax.responseText);

				// 异步 对象中 有另一个属性 用来专门获取 xml
				// xml对象 在浏览器段 就是一个 document对象
				// 解析时 能够直接使用 querySelector 或者 getElementById等等 document对象 有的语法
				console.log(ajax.responseXML);
				console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
				// 下面这个 页面文档对象 若是要获取某个标签
				console.log(window.document);

			}
		}
	}
</script>

Ajax 传输 JSON

JSON 的语法

JSON(JavaScript Object Notation)：是ECMAScript的子集。做用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。

语法规则：

数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

数据类型：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

示例：

// 对象
{
  "name":"fox",
  "age":"18",
  "sex":"true",
  "car":null
}

// 数组
[
  {
      "name":"小小胡",
      "age":"1"
  },
  {
      "name":"小二胡",
      "age":"2"
  }
]

JavaScript中：json 字符串 <--> js 对象

基本上，全部的语言都有将 json 字符串转化为该语言对象的语法。

好比在 js中：

JSON.parse()：将JSON字符串转化为 js 对象。例如：

// 将 JSON 字符串格式化为 js 对象
	var jsObj = JSON.parse(ajax.responseText);

JSON.stringify()：将 JS 对象转化为JSON字符串。例如：

var Obj = {
	  name: "fox",
	  age: 18,
	  skill: "撩妹"
	};

	console.log(Obj);

	// 将 js 对象格式化为 JSON 字符串
	var jsonStr = JSON.stringify(Obj);

PHP中：json 字符串 <--> js 对象

json_decode()方法：将json字符串转化为变量。
json_encode()方法：将变量转化为json字符串。

代码举例：

<?php
    header("Content-Type:text/html;charset=utf-8");
    // json字符串
    $jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
    // 字符串转化为 php对象
      print_r(json_decode($jsonStr));

      echo "<br>";
      // php数组
      $arrayName = array('name' =>'littleFox' ,'age' => 13 );
      // php对象 转化为 json字符串
      print_r(json_encode($arrayName));
 ?>

输出结果：

stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
	{"name":"littleFox","age":13}

ajax 请求解析 json（举例）

（1）Person.json:

{
	"name":"小强",
	"skill":"砍树",
	"friend":"老板"
}

（2）myJson.php：

<?php

	// 读取json文件 并返回便可
	echo  file_get_contents('info/Person.json');

 ?>

（3）getJson.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>获取 json 数据</h1>
	<input type="button"  value="获取json" id='btnJson'>
</body>
</html>
<script type="text/javascript">
	// 获取的是一个 若是要获取多个
	// document.querySelectorAll(selector)
	document.querySelector("#btnJson").onclick = function () {
		var ajax = new XMLHttpRequest();

		ajax.open('get','myJson.php');

		ajax.send();

		ajax.onreadystatechange = function () {
			if (ajax.readyState==4&&ajax.status==200) {
				// json 字符串 是字符串 因此咱们能够 经过  responseText获取
				console.log(ajax.responseText);

				// 转化为 js对象
				var jsObj = JSON.parse(ajax.responseText);

				console.log(jsObj);

				// 拼接ul s
				var str = '';

				str+='<ul>';
				str+='<li>'+jsObj.name+'</li>';
				str+='<li>'+jsObj.skill+'</li>';
				str+='<li>'+jsObj.friend+'</li>';
				str+='</ul>';

				// 设置到界面上

				document.body.innerHTML = str;
			}
		}
	}
</script>

演示效果：

个人公众号

想学习代码以外的软技能？不妨关注个人微信公众号：生命团队（id：vitateam）。

扫一扫，你将发现另外一个全新的世界，而这将是一场美丽的意外：