原生js语句封装jquery版ajax

function ajax() {
				var ajaxData = {
					type: arguments[0].type || "GET",
					url: arguments[0].url || "",
					async: arguments[0].async || true,
					data: arguments[0].data || null,
					dataType: arguments[0].dataType || "text",
					contentType: arguments[0].contentType || "application/x-www-form-urlencoded",
					beforeSend: arguments[0].beforeSend || function() {},
					success: arguments[0].success || function() {},
					error: arguments[0].error || function() {}
				}

				ajaxData.beforeSend();
				var xhr = createxmlHttpRequest();
				xhr.responseType = ajaxData.dataType;
				xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);
				xhr.withCredentials = true;
				xhr.setRequestHeader('Content-Type', ajaxData.contentType);
				xhr.send(convertData(ajaxData.data));
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4) {
						if(xhr.status == 200) {
							ajaxData.success(xhr.response);
						} else {
							ajaxData.error();
						}
					}
				}

			}

			//创建http请求
			function createxmlHttpRequest() {
				if(window.ActiveXObject) {
					return new ActiveXObject("Microsoft.XMLHTTP");
					//XMLHttpRequest => 可扩展超文本传输请求
				} else if(window.XMLHttpRequest) {
					return new XMLHttpRequest();
				}
			}

			//数据转换
			function convertData(data) {
				if(typeof data == 'object') {
					var convertResult = '';
					for(var c in data) {
						convertResult += c + "=" + data[c] + "&";
					}
					//substring => 子字符串
					convertResult = convertResult.substring(0, convertResult.length - 1);
					return convertResult;
				} else {
					return data;
				}
			}

			ajax({
				type: 'POST',
				url: '',
				async: true,
				dataType: '',
				data: {},
				beforeSend: function() {
					//some js code 
				},
				success: function(result) {
					console.log(result);
				},
				error: function(error,xml) {
					console.log(error);
                                        console.log(xml.readyState);
				}
			})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 使用原生 JavaScript 封装 ajax 可以这样做: ``` function ajax(method, url, data, success) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { success(xhr.responseText); } else { console.error(xhr.statusText); } } }; xhr.send(data); } ``` 使用方式: ``` ajax( "POST", "/login", "username=admin&password=123456", function(responseText) { console.log(responseText); } ); ``` 其中,method 为请求的方法(POST 或 GET),url 为请求的地址,data 为请求的数据,success 为请求成功时的回调函数。 ### 回答2: 原生js封装Ajax主要由以下几个步骤: 1. 创建一个XMLHttpRequest对象。可以使用var xhr = new XMLHttpRequest();语句来创建一个XMLHttpRequest对象。 2. 设置请求的方法和URL。使用xhr.open(method, url, async)方法来设置请求的方法、URL和是否异步,其中method为请求方法(例如GET或POST),url为请求的URL,async表示是否异步(true为异步,false为同步)。 3. 设置请求的头部信息。使用xhr.setRequestHeader(header, value)方法来设置请求头部信息,可根据需要设置Content-Type、Authorization等等。 4. 监听请求状态变化。使用xhr.onreadystatechange = function(){}语句监听请求状态的变化,当请求状态发生变化时,执行相应的处理。 5. 发送请求。使用xhr.send(data)方法发送请求,其中data为请求的数据,可以为null或者是一个字符串。 6. 处理返回结果。在监听请求状态变化的函数中,根据请求的状态和返回的结果进行相应的处理。例如,当请求状态为4且状态码为200时,表示请求成功,可以通过xhr.responseText获取响应的数据。 7. 销毁XMLHttpRequest对象。请求完成后,使用xhr = null;语句将XMLHttpRequest对象置为空,以便释放内存。 通过以上步骤,就可以封装一个基本的Ajax函数。可以根据需要添加错误处理、超时设置、数据格式转换等功能,以满足不同场景的需求。 ### 回答3: 在原生JavaScript中封装Ajax可以通过XMLHttpRequest来实现。下面是一个简单的Ajax封装函数的示例: ```javascript function ajax(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } }; xhr.open(method, url, true); if (method === 'POST') { xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } xhr.send(data); } ``` 上述函数接受四个参数:请求方法(method)、请求URL(url)、请求数据(data)和回调函数(callback)。其中,method参数可以是'GET'或者'POST',url参数是请求的目标URL,data参数是要发送的数据(如果是'POST'请求),callback参数是请求成功后要执行的回调函数。 函数内部创建了一个XMLHttpRequest对象,并通过onreadystatechange事件监听请求的状态变化。当请求状态为4且状态码为200时,表示请求已完成,可以获取到返回的数据,此时调用回调函数。 使用open方法打开请求,参数为请求方法、URL和是否异步请求。如果是POST请求,还需要调用setRequestHeader方法设置请求头的Content-Type。 最后,调用send方法发送请求数据。根据请求方法不同,send方法的参数也不同。 通过上述封装,可以方便地使用原生JavaScript进行Ajax请求,并根据请求结果执行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值