ajax

最新推荐文章于 2024-06-20 09:53:57 发布

dddjjj-sicnu

最新推荐文章于 2024-06-20 09:53:57 发布

阅读量191

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS\JQUERY

本文链接：https://blog.youkuaiyun.com/qq_43428547/article/details/99689569

JS\JQUERY 专栏收录该内容

4 篇文章

订阅专栏

1.主流浏览器创建对象(IE7以上):
var xhr = new XMLHttpRequest();

2.php生成解析json对象:
1.用数组生成,只能对关联数组，和索引关联数组使用

$city = array("河北"=>"石家庄");
json_encode($city);

2.用对象生成

class person{
	public $name = "tom";
	public $age = 23;
	public function(){
		echo "i am running";
	}
}

$per = new person();
echo json_encode($per);//只会有成员属性生成json

解析json信息:

json_decode($city,false);//第二个参数默认为falsse,也就是返回的是一个对象，当为true时，返回的是一个数组

//对于自定义的json字符串
$json = '{"name":"hebei", "color":"grey"}'//大括号外用单引号，字符串用双引号

3.向服务器发送请求

//创建对象
var xhr = new XMLHttpRequest();
//建立url连接，get方式和post方式，url可以为一个php文件，执行php文件
xhr.open('get', 'url');
//发送请求,get则填null，post则填给服务器传递的信息
xhr.send(null);

4.接受服务器返回的信息

/*
	readyState（属性）：
		0：刚创建对象
		1：已经调用open方法
		2：已经调用send方法
		3：已经返回部分数据
		4：请求完成数据完全返回
	onreadystatechange(事件):当ajax状态发生变化时要触发执行做好在创建对象后就执行
*/
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>测试</title>
	<script type="text/javascript">
		function f1(){
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4)
				{
					document.getElementById('result').innerHTML = xhr.responseText;
				}
			}
			xhr.open('get', 'index.php');
			xhr.send(null);
		}
		
	</script>
</head>
<body>
	<h1>接受服务器返回数据</h1>
	<input type="button" name="submint" value="提交" onclick="f1()">
	<p id="result"></p>
</body>
</html>

//php代码
<?php
	echo "<p>i am 19 years old</p>";
?>

4.js获取json

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>测试网页</title>
	<script type="text/javascript">
		function f1(){
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4)
				{
					eval("var weather="+xhr.responseText);
					console.log(weather);	
				}
			}
			xhr.open('get', 'index.php');
			xhr.send(null);
		}
	</script>
</head>
<body>
	<h1>js解析json</h1>
	<input type="button" name="button" value="提交" onclick="f1()">
</body>
</html>

<?php
	header("content-type:text/html; charset=utf-8");
	echo '{"city":"北京","temp":"9","WD":"西南风"}';
?>

get请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>测试网页</title>
	<script type="text/javascript">
		function f1(){
			var value = document.getElementById("username");
			// js用encodeURICoponent对中文或者其他字符进行编码,使得get请求时用户输入不会造成其他的映像比如说&
			// php的编码为urlencode解码为urldecode()	
			console.log(value);
			value = encodeURIComponent(value);
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4){
					alert(xhr.responseText);
					console.log("over");
				}				
			}
			xhr.open('get', 'index.php?name='+value+"&addr=beijing");
			xhr.send(null);
		}
	</script>
</head>
<body>
	<h1>ajax之用户名的校验</h1>
	<!-- onblur 失去焦点事件 -->
	<p>用户名:<input type="text" id="username" name="username" onblur="f1()" /></p>
	<p>电话:<input type="text" id="tel' name="tel"></p>
</body>
</html>

<?php
	print_r($_GET);

post请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>测试网页</title>
	<script type="text/javascript">
		function f1(){
			var value = document.getElementById("username").value;
			console.log(value);
			value = "name=" + value + "&addr=beijing";
			console.log(value);
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4){
					alert(xhr.responseText);
					console.log("over");
				}				
			}
			xhr.open('post', 'index.php?addr=dj');
			xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
			xhr.send("value=" + value);
		}
	</script>
</head>
<body>
	<h1>ajax之用户名的校验</h1>
	<!-- onblur 失去焦点事件 -->
	<p>用户名:<input type="text" id="username" name="username" onblur="f1()" /></p>
	<p>电话:<input type="text" id="tel' name="tel"></p>
</body>
</html>

<?php
	echo "post:";
	print_r($_POST);
	echo "get:";
	print_r($_GET);

异步与同步:
.open(‘get/post’, ‘url’, ‘true/false’)//true为异步请求,false为同步请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>测试网页</title>
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4)
			{
				alert(xhr.responseText);
				console.log("over");
			}	
		}
		xhr.open('get','index.php',true);//true为异步,false为同步
		xhr.send(null);
	</script>
</head>
<body>
	<!-- 一定要有<p>标签或者其他标签,单个img标签不会实现异步-->
	<p>我来了</p>
	<img src="bazi.png" alt="爱心靶子"/>
</body>
</html>