AJAX随笔

最新推荐文章于 2024-11-16 21:54:37 发布

cheese年糕

最新推荐文章于 2024-11-16 21:54:37 发布

阅读量242

点赞数

分类专栏：前端文章标签： js ajax json xml JavaScript

本文链接：https://blog.csdn.net/qq_40933991/article/details/102537425

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了Ajax的工作原理，包括其作用、效果及使用方法。重点讲解了如何利用XMLHttpRequest对象进行异步数据请求，并对比了XML与JSON两种数据格式的优劣。此外，还提供了Ajax的封装示例，便于开发者快速应用。

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

AJAX

1.Ajax的作用

获取服务器的数据

2.Ajax的效果

在不刷新整个页面的情况下,通过一个url地址获取服务器的数据,然后进行页面的局部刷新. 异布加载,

3.小结

Ajax的全称: Asychronous JavaScript And XML,就是使用js代码获取服务器数据.

4.Ajax的使用

Ajax简单的来说,就是一个异布的JavaScript请求,用来获取后台服务端的数据,而并不是整个界面进行跳转.

在元素js中来实现AJax主要的类就是XMLHttpRequest,它的使用一般有四个步骤;

创建XMLHttpRequest对象
准备发送网络请求
开始发送网络请求
指定回调函数

注意:

需要注意兼容处理.低版本浏览器不支持XMLHttpRequest对象,需要创建ActiveXObject对象;
指定请求方式,请求地址以及指定是否异步刷新
执行发送,POST请求方式时,数据不写在地址中,放在请求数据体中.需要发送给服务器,同时设置请求头
异步的原理是通过请求浏览器进行网络数据的请求

5. 数据格式

Xml数据格式
Xml数据格式是将数据以标签的方式进行组装,必须以<?xml version="1.0" encoding="utf-8" ?>开头,标签必须成对出现,xml是一个通用标准,任何人都知道如何解析它;
**缺点:**体积太大,传播慢,元数据太多,解析不方便,目前使用很少
JSON数据格式
Json数据格式类似于js中的对象方式,通过key-value的形式组装,是一个通用的标准,任何人都知道如何解析它;
**优点:**体积小,传输快,解析方便
解析Xml数据格式
获取Xml对象,在通过getElementsBtTagName获取标签内元素

var result=xhr.responseXML;
var books=result.getElementsByTagName("booklist")[0].getElementsByTagName("book");
var newHtml=document.getElementById("bookContariner").innerHtml;
for(var i=0;i<books.length;i++){
	var itemBook=books[i];
	var name=itemBook.getElementsByTagName("name")[0].textContent;
	var author=itemBook.getElementsByTagName("author")[0].textContent;
	var desc=itemBook.getElementsByTagName("desc")[0].textContent;
	var tempHtml="<tr><td>"+name+"</td><td>"+author+"</td><td>"+desc+"</td><td>";
	newHtml += tempHtml;
}
document.getElementById("bookContariner").innerHtml = newHtml;

解析Json数据格式
获取Json对象,再通过对象直接获取对象的属性

var result=xhr.responseTest;
//responseTest获取的是字符串,要转换成JSON对象
result=JSON.parse(result);
var newHtml=document.getElementById("bookContariner").innerHtml;
for(var i=0;i<result.length;i++){
	var item=result[i];
	var name=item.name;
	var author=item.author;
	var desc=item.desc;
	var tempHtml="<tr><td>"+name+"</td><td>"+author+"</td><td>"+desc+"</td><td>";
	newHtml += tempHtml;
}
document.getElementById("bookContariner").innerHtml = newHtml;

6.封装Ajax

function myAjax(type,url,params,callback,async){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if(type == "get"){
		if(params && params!=""){
			url += "?" + params;
		}
	}
	xhr.open(type,url,async);
	if(type == "get"){
		xhr.send(null);
	}else if(type == "post"){
		xhr.setRequestHeader("Contend-Type","application/x-www-from-urlencoded");
		xhr.send(params);
	}
	if(async){
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				if(xhr.readyState == 200){
					var result = null;
					if(dataType == "json"){
						result = xhr.responseText;
						result = JSON.parse(result);
					}else if(dataType == "xml"){
						result = xhr.responseXML;
					}else {
						result = xhr.responseText;
					}
					if(callback){
						callback(result);
					}
				}
			}
		}
	}else{
		if(xhr.readyState == 4){
				if(xhr.readyState == 200){
					var result = null;
					if(dataType == "json"){
						result = xhr.responseText;
						result = JSON.parse(result);
					}else if(dataType == "xml"){
						result = xhr.responseXML;
					}else {
						result = xhr.responseText;
					}
					if(callback){
						callback(result);
					}
				}
			}
	}
}