ajax原生javascript

其他 2019-04-27 02:32:34 阅读次数: 0

文章目录

创建AJAX的过程

XMLHttpRequest 是 AJAX 的基础，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
(1) 创建 XMLHttpRequest 对象

var xmlhttp = new XMLHttpRequest();                    //IE7及以上
  var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //IE5 和 IE6

(2) 打开连接

xmlhttp.open( method, url, async );            

//method：请求的类型，GET 或 POST
//url：文件在服务器上的位置
//async：true（异步）或 false（同步）
//同步：指发出数据后，等接收到响应以后再发送下一个数据包的通讯方式。
//异步：指发出数据后，不用等待接收到响应，接着发送下一个数据包的通讯方式。

(3) 向服务器发送请求

xmlhttp.send(string);

GET 请求:
xmlhttp.send();//get请求的参数加在url的后面

POST 请求:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");    // 向请求添加HTTP头
xmlhttp.send("fname=Bill&lname=Gates");//post请求的参数要放在send()里面

GET 还是 POST?
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求：
a. 无法使用缓存文件（更新服务器上的文件或数据库）；
b. 向服务器发送大量数据（POST 没有数据量限制）；  
c.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

(4) 接收服务器响应
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
XMLHttpRequest 对象有三个重要的属性：

  1. Onreadystatechange
      存储函数（或函数名），每当readyState 属性改变时，就会调用该函数。

  2. readyState
      存有XMLHttpRequest 的状态信息，从 0 到 4 发生变化。
      0: 请求未初始化
      1: 服务器连接已建立
      2: 请求已接收
      3:请求处理中
      4: 请求已完成，且响应已就绪

  3. Status（HTTP状态码）
      1字头：消息。这一类型的状态码，代表请求已被接受，需要继续处理。 
      2字头：成功。这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。( 200:'OK' ) 
      3字头：重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。( 304:'Not Modified' )
      4字头:请求错误。这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
      5、6字头：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生。

每当 readyState 改变时，就会触发 onreadystatechange 事件。
在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState 等于 4 且 status 为 2字头或 304时，表示响应已就绪：

  xmlhttp. onreadystatechange = function( ){
      if (xmlhttp.readyState==4 && xmlhttp.status>=200 && xmlhttp.status<300 || xmlhttp.status==304){
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    //responseText    获得字符串形式的响应数据
      }
  }

下面是封装的ajax函数：
GET 方式：

function ajax(url,success,error){
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    oAjax.open('GET',url,true);
    oAjax.send();
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                success&&success(oAjax.responseText);    //成功的回调函数
            }else{
                error&&error(oAjax.status);              //失败的回调函
            }
        }
    };
}

POST 方式：

function ajax(url,success,error){
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    oAjax.open('POST ',url,true);
    oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    oAjax.send('fname=Bill&lname=Gates');
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                success&&success(oAjax.responseText);    //成功的回调函数
            }else{
                error&&error(oAjax.status);              //失败的回调函
            }
        }
    };
}

1, Ajax 1 - 请求纯文本

<button id="button">请求纯文本</button>
<br><br>
<div id="text"></div>
-------------------------------------------------
document.getElementById('button').addEventListener("click", loadText);
function loadText() {
	// 创建XMLHttpRequest对象
	var xhr = new XMLHttpRequest();
	// console.log(xhr);
	// open(type,url/file,async)
	xhr.open('GET', 'sample.txt', true);
	// console.log("READYSTATE: ",xhr.readyState);

	// onprogress
	xhr.onprogress = function () {
		// console.log("测试READYSTATE: ",xhr.readyState);
	}

	// 两种方式请求 onload / onreadystattechange
	// xhr.onload = function(){
	// 	// console.log("READYSTATE: ",xhr.readyState);
	// 	// console.log(this.responseText);
	// 	document.getElementById('text').innerHTML = this.responseText;
	// }

	xhr.onreadystatechange = function () {
		// console.log("READYSTATE: ",xhr.readyState);
		if (this.status == 200 && this.readyState == 4) {
			// console.log(this.responseText);
			document.getElementById('text').innerHTML = this.responseText;
		} else if (this.status == 404) {
			// console.log("请求的网页不存在");
			document.getElementById('text').innerHTML = "NOT Found";
		}
	}
	// 发送请求
	xhr.send();
}

2, Ajax 2 - 请求JSON数据

<button id="button1">请求单个用户</button>
<button id="button2">请求所有用户</button>

<br><br>

<h1>单个用户</h1>
<div id="user"></div>

<h1>所有用户</h1>
<div id="users"></div>

<script>
	document.getElementById('button1').addEventListener('click',loadUser);
	document.getElementById('button2').addEventListener('click',loadUsers);

	function loadUser(){
		var xhr = new XMLHttpRequest();
		xhr.open("GET","user.json",true);
		xhr.onload = function(){
			if (this.status == 200) {
				// console.log(this.responseText);
				var user = JSON.parse(this.responseText);
				// console.log(user.name);

				var output = '';
				output += 
					'<ul>'+
						'<li>'+user.id+'</li>'+
						'<li>'+user.name+'</li>'+
						'<li>'+user.email+'</li>'+
					'</ul>';
				;
				document.getElementById('user').innerHTML = output;
			}
		}

		xhr.send();
	}

	function loadUsers(){
		var xhr = new XMLHttpRequest();
		xhr.open("GET","users.json",true);
		xhr.onload = function(){
			if (this.status == 200) {
				var users = JSON.parse(this.responseText);
				var output = '';

				// 遍历数组
				for(var i in users){
					output += 
						'<ul>'+
							'<li>'+users[i].id+'</li>'+
							'<li>'+users[i].name+'</li>'+
							'<li>'+users[i].email+'</li>'+
						'</ul>';
					;
				}
				document.getElementById('users').innerHTML = output;
			}
		}

		xhr.send();
	}

</script>

3, Ajax 3 - 请求Github接口

<button id="button">请求Github接口</button>
<br><br>
<h1>所有Github的用户信息</h1>
<div id="users"></div>
<script>
	document.getElementById('button').addEventListener('click',loadUsers);
	function loadUsers(){
		var xhr = new XMLHttpRequest();
		xhr.open("GET","https://api.github.com/users",true);
		xhr.onload = function(){
			var users = JSON.parse(this.responseText);
			// console.log(users);
			var output = '';
			for(var i in users){
				output += `
					<div class="user">
						<img src="${users[i].avatar_url}" width="70" height="70" />
						<ul>
							<li>ID: ${users[i].id}</li>
							<li>Login: ${users[i].login}</li>
						</ul>
					</div>
				`;
			}
			document.getElementById('users').innerHTML = output;
		}
		xhr.send();
	}
</script>

4, Ajax 4 - 请求PHP接口

<button id="button">获取PHP数据</button>
<br><br>

<h1>正常表单GET提交数据到PHP</h1> //这个是正常表单的get提交数据，它的内部会给你跳转到process.php
<form action="process.php" method="GET">
	<input type="text" name="name">
	<input type="submit" value="提交">
</form>
<h1>Ajax请求数据GET</h1>//用ajax发送get请求它就不用跳转，在当前页面就可以返回数据
<form id="getForm">
	<input type="text" name="name" id="name1">
	<input type="submit" value="提交">
</form>


<h1>正常表单POST提交数据到PHP</h1>//这个是正常表单的post提交数据，它的内部会给你跳转到process.php
<form action="process.php" method="POST">
	<input type="text" name="name">
	<input type="submit" value="提交">
</form>

<h1>Ajax请求数据POST</h1>////用ajax发送post请求它就不用跳转，在当前页面就可以返回数据
<form id="postForm">
	<input type="text" name="name" id="name2">
	<input type="submit" value="提交">
</form>

<script>
	document.getElementById('button').addEventListener('click',getData);
	document.getElementById('getForm').addEventListener('submit',getForm);
	document.getElementById('postForm').addEventListener('submit',postForm);

	function getData(){//直接发送get请求给process.php
		var xhr = new XMLHttpRequest();
		xhr.open('GET',"process.php?name=Henry",true);
		xhr.onload = function(){
			console.log(this.responseText);
		}
		xhr.send();
	}	

	function getForm(e){//ajax方法发送get请求是要把参数放在url里面的。
		e.preventDefault();
		var name = document.getElementById('name1').value;
		var xhr = new XMLHttpRequest();
		xhr.open('GET',"process.php?name="+name,true);
		xhr.onload = function(){
			console.log(this.responseText);
		}
		xhr.send();
	}	

	function postForm(e){//ajax方法发送post请求不能把参数放在url里面的，要放在send()里面。而且ajax的发送的post请求一定要设置请求头
		e.preventDefault();
		var name = document.getElementById('name2').value;
		var params = "name="+name;
		var xhr = new XMLHttpRequest();
		xhr.open('POST',"process.php",true);
		// 设置请求头
		xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
		xhr.onload = function(){
			console.log(this.responseText);
		}
		xhr.send(params);
	}	
</script>

5, Ajax 5 - 请求PHP数据(在数据库里面取数据)

<button id="button2">请求所有用户</button>
<br><br>
<h1>所有用户</h1>
<div id="users"></div>
<script>
	document.getElementById('button2').addEventListener('click',loadUsers,false);
	function loadUsers(){
		var xhr = new XMLHttpRequest();
		xhr.open("GET","users.php",true);
		xhr.onload = function(){
			if (this.status == 200) {
				var users = JSON.parse(this.responseText);
				var output = '';
				// 遍历数组
				for(var i in users){
					output += 
						'<ul>'+
							'<li>'+users[i].id+'</li>'+
							'<li>'+users[i].name+'</li>'+
						'</ul>';
					;
				}
				document.getElementById('users').innerHTML = output;
			}
		}
		xhr.send();
	}
</script>

其他文件
process.php:

<?php 
	
	 echo "Hello World!";

	if (isset($_GET['name'])) {
		echo "GET: 你的名字是". $_GET['name'];
	}

	# 连接数据库
	$conn = mysqli_connect("localhost","root",'root','ajaxtest');

	if (isset($_POST['name'])) {
		echo "POST: 你的名字是". $_POST['name'];

		# 将拿到的数据转化一下
		$name = mysqli_real_escape_string($conn,$_POST['name']);

		$query = "INSERT INTO users(name) VALUES('$name')";
		mysqli_query($conn,"set name utf8");
		if(mysqli_query($conn,$query)){
			echo '用户添加成功!';
		}else{
			echo "用户添加失败!".mysqli_error($conn);
		}
	}
?>

user.json

{
	"id":1,
	"name":"henry",
	"email":"[email protected]"
}

users.json

[
	{
		"id":1,
		"name":"Henry",
		"email":"[email protected]"
	},
	{
		"id":2,
		"name":"Bucky",
		"email":"[email protected]"
	},
	{
		"id":3,
		"name":"Hemiah",
		"email":"[email protected]"
	}
]

<?php 

	$conn = mysqli_connect("localhost","root","root","ajaxtest");

	$query = 'SELECT * FROM users';

	$result = mysqli_query($conn,$query);

	$users = mysqli_fetch_all($result,MYSQLI_ASSOC);
	

	echo json_encode($users);
 ?>

猜你喜欢

转载自blog.csdn.net/weixin_43623871/article/details/88949644
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022