js原生ajax请求

最新推荐文章于 2024-03-13 10:16:05 发布

江南极客

最新推荐文章于 2024-03-13 10:16:05 发布

阅读量1.6w

点赞数 4

分类专栏： JS HTML 文章标签： ajax javascript xml xmlhttprequest DOM

本文链接：https://blog.csdn.net/sinat_35861727/article/details/78809986

版权

JS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它可以在不重新加载整个页面的情况下完成与服务器交换数据并更新部分网页。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

一个完整的AJAX请求包括五个步骤:

　　1.创建XMLHTTPRequest对象

　　2.使用open方法创建http请求,并设置请求地址

　　3.设置发送的数据，开始和服务器端交互

　　4.注册事件

　　5.获取响应并更新界面

这里列出get请求和post请求的例子：

<body>
	<h2>ajax请求用户名的校验</h2>
	<p>用户名 : <input type="text" name="username" value="" οnblur="f1()" /></p>
	<p>邮箱 : <input type="text" name="email" value="" /></p>
	<div id="result" style="color:green;"></div>
	<!-- <input type="button"  value="提交" οnclick="f2()" /> -->
	
</body>

1.get请求

<script type="text/javascript">
	//请求函数
	function f1(){
		console.log('start');
		//1.创建AJAX对象
		var ajax = new XMLHttpRequest();
		
		//4.给AJAX设置事件(这里最多感知4[1-4]个状态)
		ajax.onreadystatechange = function(){
			//5.获取响应
			//responseText		以字符串的形式接收服务器返回的信息
			//console.log(ajax.readyState);
			if(ajax.readyState == 4 && ajax.status == 200){
				var msg = ajax.responseText;
				console.log(msg);
				//alert(msg);
				var divtag = document.getElementById('result');
				divtag.innerHTML = msg;
			}
		}
		
		//2.创建http请求,并设置请求地址
		var username = document.getElementsByTagName('input')[0].value;
		var email = document.getElementsByTagName('input')[1].value;
		username = encodeURIComponent(username);	//对输入的特殊符号(&,=等)进行编码
		email = encodeURIComponent(email);
		ajax.open('get','response.php?username='+username+'&email='+email);
		
		//3.发送请求(get--null    post--数据)
		ajax.send(null);
	}
	
</script>

2.post请求

<script type="text/javascript">
	//请求函数
	function f1(){
		//console.log('start');
		//1.创建AJAX对象
		var ajax = new XMLHttpRequest();
		
		//4.给AJAX设置事件(这里最多感知4[1-4]个状态)
		ajax.onreadystatechange = function(){
			//5.获取响应
			//responseText		以字符串的形式接收服务器返回的信息
			//console.log(ajax.readyState);
			if(ajax.readyState == 4 && ajax.status == 200){
				var msg = ajax.responseText;
				console.log(msg);
				//alert(msg);
				var divtag = document.getElementById('result');
				divtag.innerHTML = msg;
			}
		}
		
		//2.创建http请求,并设置请求地址
		ajax.open('post','response.php');
		//post方式传递数据是模仿form表单传递给服务器的,要设置header头协议
		ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
		
		//3.发送请求(get--null    post--数据)
		var username = document.getElementsByTagName('input')[0].value;
		var email = document.getElementsByTagName('input')[1].value;
		username = encodeURIComponent(username);	//对输入的特殊符号(&,=等)进行编码
		email = encodeURIComponent(email);
		var info = 'username='+username+'&email='+email;	//将请求信息组成请求字符串
		ajax.send(info);
	}
	
</script>

江南极客

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
js原生ajax请求

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它可以在不重新加载整个页面的情况下完成与服务器交换数据并更新部分网页。
复制链接

扫一扫