原生js实现ajax的一个简单demo

最新推荐文章于 2021-08-05 17:11:49 发布

Zcxuhhhh

最新推荐文章于 2021-08-05 17:11:49 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： ajax javascript

本文链接：https://blog.csdn.net/Zcxuhhhh/article/details/72943882

版权

这篇博客展示了如何使用原生JavaScript实现一个简单的AJAX（异步JavaScript和XML）示例，包括创建XMLHttpRequest对象、处理数据传输状态、以及表单验证。通过`submitFormWithAjax`函数，实现了表单数据的异步提交，并在响应到来时更新页面内容。

摘要由CSDN通过智能技术生成

ajax技术非常普遍，各种框架都有实现，今天我写一个原生js实现的ajaxdemo

//判断一个表单是否有必须要填写的输入框，然后没有被填写
function validateForm(whichform){
	for(var i = 0;i<whichform.elements.length;i++){
		//遍历表单中需要填写的信息
		var element = whichform.elements[i];


		if(element.required == 'required'){
			//alert(element);
			if(!isFilled(element)){
				alert("请填写" + element.name + "表格");
				return false;
			}
		}
	}
	return true;
}


//为页面中的所有表单绑定点击提交事件。
function prepareForms(){
	for(var i = 0;i<document.forms.length;i++){
		//遍历所有表单
		var thisform = document.forms[i];
		//resetFields(thisform);
		thisform.onsubmit = function(){
			//点击函数返回false页面不会发生跳转
			if(!validateForm(this)) {return false;}
			//找到p标签由article引用
			var article = document.getElementsByTagName('p')[0];
			//以异步的方式提交数据，返回的信息存在article变量里
			if(submitFormWithAjax(this,article)) return false;
			//alert("success