ajax学习笔记

时间 2019-11-16

标签 ajax 学习笔记栏目 Ajax 繁體版

原文原文链接

问题

要作的仍旧是很简单javascript

- 请求php

- 响应css

常见的请求方式有如下几种html

img标签的src
link标签引入css
script标签引入js
form标签提交

上拉加载更多(以及主动刷新页面部份内容),须要客户端主动用代码从服务端请求数据,上面的方案彷佛不能知足需求了.ajax技术就是为了解决这样一个问题.java

解决

经过XMLHttpRequest对象,咱们能够主动的从服务器获取数据以刷新部分页面ajax

You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

XMLHttpRequest对象,不只像字面那样只能请求XML格式的数据,还能够请求其余类型的数据,好比json等;并且支持的协议也不单单是http,对于ftp和file协议也是支持的json

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp).bash

使用XMLHttpRequest请求json数据

客户端代码:服务器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学生列表</title>
</head>
<body>
	<ul id="stus">
		
	</ul>
	<script type="text/javascript">
		// 获取元素
		var stus_tag = document.getElementById('stus');

                //1.初始化XMLHttpRequest对象
		var xhr = new XMLHttpRequest();

                //2.调用监听方法
		xhr.onload = function () {
			if (this.readyState !== 4) {return;}
			// console.log(this.responseText);
			// 遍历数据,展现
			var stus = JSON.parse(this.responseText);
			for (var i = 0; i < stus.length; i++) {
				// console.log(stus[i]);
				// 建立li
				var li_tag = document.createElement('li');
				// 设置内容
				li_tag.innerHTML = stus[i].name;
				// 拼接
				stus_tag.appendChild(li_tag);
			}
		}
                //3.设置请求方法和请求路径
		xhr.open('GET','./students.php');
                //4.发送请求
		xhr.send();
	</script>
</body>
</html>
复制代码

服务端代码app

<?php 
	$stus =  array(
		array('id' => 1,'name' => '张三', 'age' => 28),
		array('id' => 2,'name' => '李四', 'age' => 29),
		array('id' => 3,'name' => '王五', 'age' => 30),
		array('id' => 4,'name' => '赵六', 'age' => 31),
		array('id' => 5,'name' => '田七', 'age' => 32)
	 );

	header("Content-Type:Application/json");

	echo json_encode($stus);	
 ?>
复制代码

客户端代码其实有一点问题,onload函数中打印readyState

xhr.onload = function () {
    console.log(this.readyState);
    if (this.readyState !== 4) {return;}
    .....
}复制代码

永远都只能打印4

只有在onreadystatechange中才能够监听到readyState的变化,修改代码以下

xhr.onreadystatechange = function () {
                        console.log(this.readyState);
			if (this.readyState !== 4) {return};
			var stus = JSON.parse(this.responseText);
			for (var i = 0; i < stus.length; i++) {
				// console.log(stus[i]);
				// 建立li
				var li_tag = document.createElement('li');
				// 设置内容
				li_tag.innerHTML = stus[i].name;
				// 拼接
				stus_tag.appendChild(li_tag);

				li_tag.id = stus[i].id;
			}
		}复制代码

打印以下

状态说明中还有0

须要在open以前调用onreadystatechange才能打印全部状态,奇怪,确实是在open以前调用的啊,猜想是否是网速缘由,执行太快了

傻了傻了,初始值是0,此时readyState尚未发生化,onreadystatechange天然不会打印0

上述示例已经完成了一个基本的应用,此外就是一些方法和属性的使用.

发送一个post请求,设置请求头,设置请求参数

给li标签添加点击事件,点击弹出对应条目的年龄

li_tag.id = stus[i].id;

li_tag.onclick = function () {
    //从新发起请求,获取age
    var xhr2 = new XMLHttpRequest();
    xhr2.onload = function () {
        if (this.readyState !== 4) {return}
        alert(this.responseText);
    }
xhr2.open('POST','./students.php');
//设置请求头
xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var para = "id=" + this.id;
//传递参数
xhr2.send(para);
}
复制代码

服务端代码

<?php 

	$stus =  array(
		array('id' => 1,'name' => '张三', 'age' => 28),
		array('id' => 2,'name' => '李四', 'age' => 29),
		array('id' => 3,'name' => '王五', 'age' => 30),
		array('id' => 4,'name' => '赵六', 'age' => 31),
		array('id' => 5,'name' => '田七', 'age' => 32)
	 );

	header("Content-Type:Application/json");

	if ($_SERVER['REQUEST_METHOD'] === "GET") {
		echo json_encode($stus);
	}elseif ($_SERVER['REQUEST_METHOD'] === "POST") {
		foreach ($stus as $item) {
			if ($_POST['id'] == $item['id']) {
				echo $item['age'];
			}
		}
	}
	
 ?>
复制代码

设置响应头

服务端设置响应头

能够看出post状态下返回的是年龄字符串,可是response中的Content-Type倒是application/json,这样虽然没有不会出现错误,可是实际上倒是欺骗了客户端,正确的作法是content-type和实际返回给客户端的数据类型保持一致,改为以下

客户端设置响应头

设置responseType则由ajax将服务端返回的数据处理成json,无论服务端设置

xhr.open('GET','./students.php');
		xhr.responseType = 'json';
		xhr.send();
复制代码

服务端去掉下面的代码

// header("Content-Type:Application/json");
复制代码

由于上面的示例代码中都是对responseText进行处理,能够发现,设置xhr的responseType为json的时候,压根不返回responseText,直接返回处理好的response,于是数据渲染失败.

get请求如何传参数?

If the request method is GET or HEAD, the bodyparameter is ignored and the request body is set to null.

这是send()函数的说明,若是是get请求,会忽略send()中的参数,并设置为null.真的是这样吗?那么是否应该把参数拼接在url后面?

get请求下send中传参

xhr.send('foo=value');
复制代码

发现确实不见了

服务端打印,也见不到提交的get参数

var_dump($_GET);
复制代码

那么仍是把参数拼接在url后面

xhr.open('GET','./students.php?foo=value');
复制代码

能够打印$_GET

也能够看到上传的参数