封装ajax原理

封装ajax原理

  1. 首先处理 用户如果不传某些参数,设置默认值

    • type默认get
    • 默认url为当前页
    • 默认async方式请求
    • data数据默认为{}
  2. 处理用户传进来的参数对象
    • 遍历,拼接成key=value&key=value形式,加入数组
  3. 通过XMLHttpRequest对象创建xhr,早期的IE浏览器不支持XMLHttpRequest对象,通过var xhr = new ActiveXObject(‘Msxm12.XMLHTTP‘)创建
  4. 判断用户请求的方法
    • get:将数据拼接在url后面,
    • post:需要加一个请求头,并且用send方法传递数据
  5. 判断数据是否请求成功
    • xhr.readyState == 4 && xhr.status == 200表示请求成功
  6. 根据服务器端返回的数据类型进行加工,再用callback传递出去
    • 如果返回的是json格式的数据,就转换成js对象json.parse
    • 如果是xml格式,就将DOM文档对象返回
    • 将处理好的数据用callback传递出去
  7. 优化!!!
    • 将用户需要传入的参数挂载到options对象上,用户只需要传入一个对象就可以使用了
function ajax(options){
			//默认值的处理,用户不传某些参数的时候,设置一些默认值
			//设置type的默认值为get
			options.type = options.type || "get";
			//设置请求地址的默认值为当前页地址
			options.url = options.url || location.href;
			// //设置async的默认值
			options.async = options.async || "true";
			//设置options.data的默认值
			options.data = options.data || {};

			//处理用户传进来的请求参数(data)对象
			//{key: "123", age: 1, gender: "male"}
			//key=123&age=1&gender=male
			var dataArr = [];
			for(var k in options.data){
				dataArr.push(k + "=" + options.data[k]);
			}
			var dataStr = dataArr.join("&");

			var xhr = new XMLHttpRequest();
			xhr.open(options.type, options.type == "get"? options.url + "?" + dataStr : options.url, options.async);

			if(options.type == "post"){
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			}
			xhr.send(options.type == "get"? null : dataStr);

			if(options.async){
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						var type = xhr.getResponseHeader("Content-Type");
						var result;
						if(type.indexOf("json") != -1){
							result = JSON.parse(xhr.responseText);
						}else if(type.indexOf("xml") != -1){
							result = xhr.responseXML;
						}else{
							result = xhr.responseText;
						}
						options.success(result);
					}
				}
			}else{
				var type = xhr.getResponseHeader("Content-Type");
				var result;
				if(type.indexOf("json") != -1){
					result = JSON.parse(xhr.responseText);
				}else if(type.indexOf("xml") != -1){
					result = xhr.responseXML;
				}else{
					result = xhr.responseText;
				}
				options.success(result);
			}
		}

		function get(options){
			options.type = "get";
			ajax(options);
		}

		function post(options){
			options.type = "post";
			ajax(options);
		}

		// ajax({
		// 	url: "json.php",
		// 	data: {key: "123", age: 1, gender: "male"},
		// 	success: function(data){
		// 		console.log(data);
		// 	}
		// });

		get({
			url: "json.php",
			success: function(data){
				console.log(data);
			}
		})

		// ajax({
		// 	url: "xml.php",
		// 	type: "get",
		// 	data: {key: "123", age: 1, gender: "male"},
		// 	success: function(data){
		// 		console.log(data);
		// 	}
		// });

  

时间: 2024-10-11 22:57:25

封装ajax原理的相关文章

轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)

hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + XML(异步JavaScript和XML )) 二.效果 实现无刷新效果,向后台异步的取数据(不是只有AJAX才能实现这样的效果的哦,如img , script标签中的src属性也可以实现一样的效果,可以自己尝试一下哦) 三.本质 可能我们在学习过程中会觉得ajax好难,我也是这样过来的,我觉得是我们

大话AJAX原理

大话AJAX原理 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来.常见运用场景有表单验证是否登入成功.百度搜索下拉框提示和快递单号查询等等.Ajax目的:提高用户体验,较少网络数据的传输量 二.Ajax原理是什么 在解释Ajax原理之前,我们不妨先举个“领导想找小李汇报一下工作

一张图搞懂Ajax原理

本文整理在,我的github上.欢迎Star. 原理 说起ajax,就不得不说他背后的核心对象XMLHttpRequest,而说到XMLHttpRequest我觉得,从它的readyState状态说起是最好的切入点. 个人觉得,只要弄清楚了readyState的这几个状态,其实ajax的原理也就算弄清楚了.为了更方便您理解,笔者特意画了一张状态图. 您只需要看懂这张图ajax原理,您就算通关了:并且很难忘记. 首先let xhr = new XMLHttpRequest();,新建一个XMLHt

原生JS封装ajax方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 10 <script> 11 12 //将对象序列

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)

一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发送请求 - 服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容 Ajax工作原理 获取Ajax对象 二.Ajax对象属性和方法 异步对象的属性和方法 onreadystatechange - onreadystatecha

ajax原理总结附简单实例及其优点

在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 详情请移步Ajax: A New Approach to Web Applications [原理] 简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面

Ajax 原理过程 同步与异步区别 优缺点

ajax原理过程                                                                                                                                        利用XMLHttpRequest对象发送简单请求的基本步骤:1)创建XMLHttpRequest对象实例2)设定XMLHttpRequest对象的回调函数,利用onreadystatechange属性3)设定请求