AJAX的封装和提交方式

最新推荐文章于 2022-07-20 09:41:31 发布

wyh_www

最新推荐文章于 2022-07-20 09:41:31 发布

阅读量243

点赞数

分类专栏：代码总结

本文链接：https://blog.csdn.net/WYH1205/article/details/86838042

版权

代码总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、什么是AJAX
ajax是一种技术，是用来进行前后端交互的技术。他可以异步的运输数据。可以节省异步的操作、时间、提高用户的体验、减少数据请求、传输数据请求。
异步：非堵塞，前面一个程序是否执行完毕，不影响后面的程序的执行。
同步：阻塞，前面的程序执行完毕以后，后面的程序才能执行。
带格式的字符串分两种：
1.xml格式
2.json格式

ajax传输数据的步骤：
1.先声明一个ajax对象
2.在地址栏中输入url
3.点击提交
4.等待回应
代码如下：

		<script>
			window.onload = function(){
				var oBtn = document.getElementById("btn1");
				oBtn.onclick = function(){
					//通过ajax下载数据

					//1、打开窗口
					//2、声明一个ajax对象
					var xhr = new XMLHttpRequest();

					/*
						第一个参数，请求的方式 get post
						第二个参数，请求的url
						第三个参数，是否异步 true
					*/
					//2、在地址栏中输入url
					xhr.open("get", "code/1.txt"., true);

					//3、点击提交
					xhr.send();

					//4、等待回应
					xhr.onreadystatechange = function(){
						if(xhr.readyState == 4){
							alert(xhr.responseText);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<button id = 'btn1'>下载</button>
	</body>

因为在浏览器中有兼容性
IE6以下兼容ActiveXObject(“Microsoft.XMLHTTP”)
兼容代码如下：

      <script>
			window.onload = function(){
				var oBtn = document.getElementById("btn1");
				oBtn.onclick = function(){
					//通过ajax下载数据

					//1、打开窗口
					//2、声明一个ajax对象
					var xhr = null;

					if(window.XMLHttpRequest){
						xhr = new XMLHttpRequest();
					}else{
						//低版本的IE浏览器不支持
						xhr = new ActiveXObject("Microsoft.XMLHTTP");  //ie6以下
					}

					/*
						第一个参数，请求的方式 get post
						第二个参数，请求的url
						第三个参数，是否异步 true
					*/
					//2、在地址栏中输入url
					xhr.open("get", "code/1.txt", true);

					//3、点击提交
					xhr.send();

					//4、等待回应
					xhr.onreadystatechange = function(){
						if(xhr.readyState == 4){
							alert(xhr.responseText);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<button id = 'btn1'>下载</button>
	</body>

用来调试的一个语句
try{
执行的代码1;
}catch(error){
补救代码;
}

try_throw_catch

			catch 用来捕获异常
			throw 手动抛出异常

			try{
				尝试去执行的代码;
				throw new Error("报错信息，自定义");
			}catch(error){
				error就是捕获到的异常
				补救代码;
			}

示例代码

    <script>
           try{
				var num = 10;
				alert("执行代码之前");
				if(num == 10){
					throw new Error("num==10，是不符合条件的");
				}
				alert("执行代码之后");
			}catch(error){
				//error错误对象：try中异常信息
				alert("补救代码，错误：" + error);
			}
	</script>

事件函数
readystatechange 事件，当readyState的值发生变化的时候，触发事件，执行这个事件对应的处理函数。

					readyState
					0  没有调用open方法的时候
					1  调用完send方法之后是1
					2  send已经完成，接收到响应内容
					3  正在解析响应的内容
					4  解析数据完成

二、AJAX的提交方式
1.表单的GET请求：
action 填写跳转到的地址
method 发送数据的方式
get 默认是get
http://10.30.152.144/php3/code/1.get.php?username=tianyufei&age=20&password=123456
【注】get请求是通过将所传输的数据，直接通过?，键值对的形式拼接在url后面，进行传输的。
缺点：
1、不安全
2、不能上传上限 2kb

代码：

<form action="code/1.get.php">
			<input type="text" name = 'username' value = '' placeholder="用户名">
			<input type="text" name = 'age' value = '' placeholder="年龄">
			<input type="text" name = 'password' value = '' placeholder="密码">
			<input type="submit" value = '提交' />
		</form>

2.表单的POST请求：
post
设置提交格式：
enctype = “application/x-www-form-urlencoded”
【注】post请求，提交的数据是通过浏览器内部传输的。
好处：
1、安全
2、理论上传输数据是没有上限
3、上传

代码如下：

		<form action="code/1.post.php" method = "post" enctype = "application/x-www-form-urlencoded">
			<input type="text" name = 'username' value = '' placeholder="用户名">
			<input type="text" name = 'age' value = '' placeholder="年龄">
			<input type="text" name = 'password' value = '' placeholder="密码">
			<input type="submit" value = '提交' />
		</form>