ajax原生javascript
文章目录
- 创建AJAX的过程
- 1, Ajax 1 - 请求纯文本
- 2, Ajax 2 - 请求JSON数据
- 3, Ajax 3 - 请求Github接口
- 4, Ajax 4 - 请求PHP接口
- 5, Ajax 5 - 请求PHP数据(在数据库里面取数据)
创建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 对象有三个重要的属性：
-
Onreadystatechange
存储函数（或函数名），每当readyState 属性改变时，就会调用该函数。 -
readyState
存有XMLHttpRequest 的状态信息，从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3:请求处理中
4: 请求已完成，且响应已就绪 -
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 +=
''
+
'' +user.id+''+
'' +user.name+''+
'' +user.email+''+
'';
;
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 +=
''
+
'' +users[i].id+''+
'' +users[i].name+''+
'' +users[i].email+''+
'';
;
}
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 += `
${users[i].avatar_url}" width="70" height="70" />
- ID:
${users[i].id}
Login: ${users[i].login}
`;
}
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 +=
''
+
'' +users[i].id+''+
'' +users[i].name+''+
'';
;
}
document.getElementById('users').innerHTML = output;
}
}
xhr.send();
}
</script>
其他文件
process.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]"
}
]
$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);
?>