Ajax理解

꧁惜若༒奔已꧂

已于 2023-11-23 08:35:02 修改

阅读量44

点赞数

文章标签： ajax javascript

于 2023-10-26 23:18:29 首次发布

惜若

本文链接：https://blog.csdn.net/qq_69581907/article/details/134066878

版权

ajax概述

是一种在前端开发中用于创建异步网络请求的技术
在不刷新整个页面的情况下，与服务器进行数据交换和通信(from表单提交的方式需要刷新整个页面)

Ajax使用

创建XMLHttpRequest对象

//不同的	浏览器使用的异步调用的对象有所不同

//创建Ajax核心对象XMLHttpRequest
var xhr=null;  
if (window.XMLHttpRequest)  
{// 兼容 IE7+, Firefox, Chrome, Opera, Safari浏览器
	 xhr=new XMLHttpRequest();  
} else{// 兼容 IE6, IE5 浏览器
     xhr=new ActiveXObject("Microsoft.XMLHTTP");  
}

创建Http请求

//格式
xhr.open(method,URL,flag,name,password);
//案例,一般只用前三个参数
xhr.open('get','http://localhost:8080/...',true);

method:HttP请求的方法，一共有5个请求方法：“get,post,head,put,delete”
URL:HttP请求的URL地址
flag:是否开启异步方式，默认为true
name:用于输入用户名，如果服务器需要验证，则必须使用该参数
password：用于输入密码，若服务器需要验证，则必须使用该参数

设置响应HTTP请求状态变化的函数

创建完HTTP请求之后，应该就可以将HTTP请求发送给Web服务器了。然而，发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态

0:为初始化状态,创建完XMLHttpRequest对象时
1:初始化状态,使用open()方法创建Http请求时
2：发送数据状态，使用send()方法发送数据时
3:接收数据状态，服务器向客户端返回结果时
4:完成状态，XMLHttpRequest接收响应结果完毕

判断响应结果

xhr.onreadstatechange=function() {
  if(xhr.readyState == 4) {
    //当状态为4时证明请求已完成并为完毕状态,才可以对响应数据进行操作
    //这个里面处响应
  }
}

发送请求

xhr.send();

完整的ajax案例

<html>
<head>
<title>AJAX实例</title>
<script language="javascript" type="text/javascript">   
    function xr(){
		let by;  // 创建XMLHttpRequest对象，即一个用于保存异步调用对象的变量
		if(window.ActiveXObject){ // IE浏览器的创建方式
            by = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){ // Netscape浏览器中的创建方式
            by = new XMLHttpRequest();
        }
		xmlHttpRequest.onreadystatechange=function(){ // 设置响应http请求状态变化的事件
            console.log('请求过程', xmlHttpRequest.readyState);
			if(xmlHttpRequest.readyState == 4){ // 判断异步调用是否成功,若成功开始局部更新数据
				console.log('状态码为', xmlHttpRequest.status);
				if(xmlHttpRequest.status == 200) {
					console.log('异步调用返回的数据为：', xmlHttpRequest .responseText);
					document.getElementById("myDiv").innerHTML = xmlHttpRequest .responseText; // 局部刷新数据到页面
				} else { // 如果异步调用未成功,弹出警告框,并显示错误状态码
					alert("error:HTTP状态码为:"+xmlHttpRequest.status);
				}
			}
		}
		by.open("GET","https://www.runoob.com/try/ajax/ajax_info.txt",true); // 创建http请求，并指定请求得方法（get）、url（https://www.runoob.com/try/ajax/ajax_info.txt）以及验证信息
		by.send(null); // 发送请求
    }
</script>
</head>
<body>
    <div id="myDiv">原数据</div>
    <input type = "button" value = "更新数据" onclick = "ajaxHttpRequestFunc()">
</body>
</html>