ajax基本用法，小白入门

最新推荐文章于 2022-03-28 16:20:15 发布

不落不息

最新推荐文章于 2022-03-28 16:20:15 发布

阅读量127

点赞数

分类专栏： # ajax 文章标签： ajax php

本文链接：https://blog.csdn.net/weixin_43416215/article/details/108878958

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Ajax小串烧

Ajax背景知识点
- Ajax优点
- Ajax缺点
理解静态网站和动态网站
- 静态网站
- 动态网站
ajax中get方式请求
ajax中post请求方式写法

Ajax背景知识点

Ajax表示Asynchronous JavaScript and XML，异步JavaScript和XML，它通过与服务器进行少量的数据交换，可以实现在不重新加载整个网页的情况下，对网页部分进行更新。

Ajax优点

最大的优点是页面无刷新更新，用户体验好
与服务器通信采用异步，响应速度更快
技术标准化，被浏览器广泛支持，不需要下载插件

Ajax缺点

有安全问题，Ajax会暴露与服务器交互的细节
它不支持浏览器的back返回按钮

理解静态网站和动态网站

静态网站

它是提前写好的html页面，主要存在的问题：随着网站规模的增大可维护性就越低，没有交互性，用户体验不友好

动态网站

由服务器动态生成的，动态生成不一定是一个完整的页面，也可能是页面的部分，或者只有数据

ajax中get方式请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
	<script type="text/javascript">
		window.onload=function(){
			var btn =document.getElementById("btn");

			btn.onclick =function(){
				//get方式的请求路径必须传参
			    var user = document.getElementById("username").value;
			    var pw = document.getElementById("pw").value;
				// 1.创建XMLHttpRequest对象
			    var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
			    // 2.准备发送
			    var param = 'username='+user+'&password='+pw;
			    xhr.open('get','index2.php?'+encodeURI(param),true);
			     /*open的三个参数
			    第一个：请求方式（get获取数据，post提交数据）
			    第二个：请求路径
			    第三个：默认true（true：异步，false：同步）
			    */
			    //encodeURI():对中文参数进行编码，防止乱码

			    //3.执行发送,get：某些浏览器需要设为null,为了兼容，设为null
			    xhr.send(null);
			    //4.指定回调函数
			    xhr.onreadystatechange = function(){
			    	if (xhr.readyState == 4) {
			    		if(xhr.status >= 200 && xhr.status < 300 || xhr.status ==304 ){
			    			alert(xhr.responseText);
			    			if (xhr.responseText == '1') {
			    				document.getElementById("info").innerHTML = '登录成功';
			    			}else{
			    				document.getElementById("info").innerHTML = '登录失败';
			    			}

			    		}
			    	}
			    }
			    /*
			    onreadystatechange调用的条件是readyState状态发生变化（不包括从0变为1）
			    readyState属性值的含义：
                    0：初始值，表示请求未初始化，open方法尚未调用；
                    1：启动请求，open 方法已经调用，但尚未调用 send 方法；
                    2：请求发送，已经调用 send 方法，但尚未接收到响应；
                    3：接收响应，已经接受到部分响应数据，主要是响应头；
                    4：HTTP 响应完成，已经接收到全部响应数据，而且可以在客户端使用。 

                响应完成只代表请求结束，服务器的响应状态则由HTTP状态码（存储status）判断

                HTTP 状态码是用来表示网页服务器响应状态的 3 位数字代码，所有状态码的第一个数字代表了响应的五种状态之一：
                    1xx：临时响应
                    2xx：成功
                    3xx：重定向
                    4xx：请求错误
                    5xx：服务器错误
                2开头的状态码 与 304 的状态码都表示请求成功及获取到HTTP响应数据
                304：是对客服端可读取缓存的一种响应，也能获取到HTTP响应数据

			    */

			}
		}
	</script>
</head>
<body>
	<div>测试页面</div>
	<div>
		<!-- form默认method为get -->
		<form>
		姓 名：<input type="text" name="username" id="username"><br>
		密 码：<input type="password" name="pw" id="pw"><br>
		<input type="button" value="登录" id="btn"><br>
		<span id="info"></span>
		</form>
	</div>

</body>
</html>

php后台

<?php
$user = $_GET['username'];
$pw =$_GET['password'];
if($user == '小红' && $pw == '123'){
	echo 1;
}else{
	echo 2;
}
?>

ajax中post请求方式写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
	<script type="text/javascript">
		window.onload=function(){

			var btn =document.getElementById("btn");
			btn.onclick =function(){
				//post请求参数由send传递
			    var user = document.getElementById("username").value;
			    var pw = document.getElementById("pw").value;
			    var param = 'username='+user+'&password='+pw;

				// 1.创建XMLHttpRequest对象
			    var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
			    // 2.准备发送
			    xhr.open('post','index2.php?',true);
			    // 3.在open之后设置请求头,一定要设置
			    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			    //4.执行发送
			    xhr.send(param);//不需要转码
			    //5.指定回调函数
			    xhr.onreadystatechange = function(){
			    	if (xhr.readyState == 4) {
			    		if(xhr.status >= 200 && xhr.status < 300 || xhr.status ==304 ){
			    			alert(xhr.responseText);
			    			if (xhr.responseText == '1') {
			    				document.getElementById("info").innerHTML = '登录成功';
			    			}else{
			    				document.getElementById("info").innerHTML = '登录失败';
			    			}

			    		}
			    	}
			    }

			}
		}
	</script>
</head>
<body>
	<div>测试页面</div>
	<div>
		<!-- form默认method为get -->
		<form>
		姓 名：<input type="text" name="username" id="username"><br>
		密 码：<input type="password" name="pw" id="pw"><br>
		<input type="button" value="登录" id="btn"><br>
		<span id="info"></span>
		</form>
	</div>

</body>
</html>

php后台

<?php
$user = $_POST['username'];
$pw =$_POST['password'];
if($user == '小红' && $pw == '123'){
	echo 1;
}else{
	echo 2;
}
?>

不落不息

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax基本用法，小白入门

Ajax小串烧Ajax背景知识点Ajax优点Ajax缺点Ajax背景知识点Ajax表示Asynchronous JavaScript and XML，异步JavaScript和XML，它通过与服务器进行少量的数据交换，可以实现在不重新加载整个网页的情况下，对网页部分进行更新。Ajax优点最大的优点是页面无刷新更新，用户体验好与服务器通信采用异步，响应速度更快技术标准化，被浏览器广泛支持，不需要下载插件Ajax缺点有安全问题，Ajax会暴露与服务器交互的细节它不支持浏览器的back返回
复制链接

扫一扫