原生Ajax实现页面局部更新功能

最新推荐文章于 2023-06-23 10:42:42 发布

从入门到放弃_nys

最新推荐文章于 2023-06-23 10:42:42 发布

阅读量497

点赞数 1

分类专栏：前端文章标签： Ajax 异步 json

本文链接：https://blog.csdn.net/weixin_42031119/article/details/101369889

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

原生Ajax实现页面局部更新功能

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）

同步：必须等前面的任务完成，才可以继续后面的任务。
异步：不受当前任务影响

使用Ajax发送请求：
1.创建异步（XMLHttpRequest）对象
2.准备发送
3.执行发送动作
4.执行回调函数

分开来一步步看：

一、原生Ajax

1.创建异步（XMLHttpRequest）对象

var xhr = null;
if (window.XMLHttpRequest) {
     xhr = new XMLHttpRequest();       //标准创建XMLHttpReques对象
} else {
     xhr = new ActiveXObject('Microsoft.XMLHTTP');    //IE6，兼容处理
}

2.准备发送

三个参数：open（请求方式，请求地址，同步或异步标志符）
默认是true,异步。false,同步。
get请求：

xhr.open('get', 'get.php', true);

post请求：

xhr.open('post', 'get.php', true);      
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    //如果想要使用post提交数据,必须添加此行

如果是get请求，那么请求参数必须在url中传递。get要注意，IE中要用encodeURI（）对中文编码，防止乱码。

例如：

var param = 'username' + uname + '&password' + pwd;
xhr.open = ('get','get.php?' + encodeURI(param), true);

3.执行发送动作

get请求需添加null参数

 xhr.send(null);

post请求参数在这传递，且不需要转码

 xhr.send(param);

4.执行回调函数

xhr.onreadystatechange = function () {
	if (xhr.readyState == 4) {       //表示服务器端数据回来了
		if (xhr.status == 200)  {     //表示数据正常
			var data = xhr.responseText;          //获取后台的字符串
            var obj = JSON.parse(data);         //json字符串转为对象
            var tag = '<div><span>' + obj.name + '</span><span>-------</span><span>' + obj.age + '</span></div>';
            var info = document.getElementById('info');
            info.innerHTML = tag;
            console.log(2);
		}
	}
}

补充：

readyState=0,表示xhr创建完成
readyState=1，表示已经发送了请求，调用了xhr.send()
readyState=2，表示浏览器已收到服务器响应的数据
readyState=3，正在解析数据
readyState=4，数据已解析完成，可以使用（但不一定正常）

xhr.status==200，表示数据正常
常见的http状态码：200 响应成功
                               404 没找到请求资源
                               403 服务器得到请求，但拒绝执行
                               401 请求需用户验证
                               500 服务端错误
                               … …

附一个总的demo

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="info"></div>
    <input type="button" id="btn" value="获取json">
</body>

<script type="text/javascript">
    window.onload = function () {
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.open('get', 'get.php', true);
            xhr.send(null);
            console.log(1);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var data = xhr.responseText;          //获取后台的字符串
                        var obj = JSON.parse(data);         //json字符串转为对象
                        var tag = '<div><span>' + obj.name + '</span><span>-------</span><span>' + obj.age + '</span></div>';
                        var info = document.getElementById('info');
                        info.innerHTML = tag;
                        console.log(2);
                    }
                }
            }
            console.log(3);             // 1 3 2回调函数最后 异步的效果
        }
    }
</script>
</html>

get.php

<?php
    header("Content-Type:text/html;charset=utf-8");
    //json字符串，注意是字符串=>   '括起json'
     //$arr = '{"name":"ch", "age":"22"}';
     //echo $arr;
     
    //数组
    $arr = array("name"=>"ch", "age"=>"22");
    echo json_encode($arr);
?>

附图：
在这里插入图片描述

在这里插入图片描述
控制台

二、jQuery实现Ajax请求

$(function(){
	$('#btn').click(function(){
		//获取数据
		var username = $('#username');	
		var pwd = $('#password');
		//调用$.ajax()发送ajax请求数据
		$.ajax({
			type: 'get',
			url: './11.php',
			data: {
				uname: username,
				pwd: password,
			},
			dataType: 'json',
			success: function(data){
				//成功回调
			},
			error: function(data){
				//失败回调
			}
		})
	})
})