实用js/jq的ajax详解

  • Post author:
  • Post category:其他



Ajax

:Asynchronous JavaScript and XML(异步JavaScript和XML)。

是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。


功能

:节省用户操作时间,提高用户体验,局部刷新减少数据请求;

我们要知道,其实Ajax就是去请求后台接口拿数据的,前端拿到后台的数据后就用这些数据进行dom操作以相应的样式输出到页面中。(最难的地方就是对获取到的数据进行分析和处理并渲染到页面上)



一、我们首先来看一个get请求的ajax流程(js代码):

//创建一个ajax对象(类似于打开浏览器)
var xhr = XMLHttpRequest
    ? new XMLHttpRequest()
    : new ActiveXObject('Microsoft.XMLHTTP'); //new ActiveXObject('Microsoft.XMLHTTP') 这个我们是对低版本IE浏览器进行兼容性处理

//使用ajax对象下面的open方法告知浏览器请求的方式(相当于在地址栏输入地址)
xhr.open('get','1.txt',true);

//提交(相当于按回车键)
xhr.send();    //在这一步才会发送网络请求(上面是准备工作)

//等待服务器返回内容
xhr.onreadystatechange = function() {    // 监测readyState状态值变化
    if ( xhr.readyState == 4 ) { // readyState状态值为4表示响应内容解析完成,可以在客户端调用了
        if ( xhr.status == 200) {  //200表示http请求正确
            alert( xhr.responseText ); // responseText 为后台返回的数据 
        } else {
            alert('出错了,Err:' + xhr.status);   //返回错误响应的http状态码
        }
    }
    
}



二、接下来我们详细分析一下请求ajax的流程:



1、创建一个ajax对象
var xhr = new XMLHttpRequest(); 

(创建了ajax对象之后才能使用ajax对象下面的方法和属性)



2、使用ajax对象下面的open()方法
open('get','url',true)方法
接收三个参数:
	1.请求方式(get、post 或者其他)
	2.地址(请求的后台接口地址)
	3.是否异步(true为异步;false为同步)


异步

:非阻塞 ajax请求的代码不会影响后面代码的执行(ajax请求的代码就算没执行完也能执行后面的代码)


同步

:阻塞 ajax请求的代码会影响后面代码的执行(ajax请求的关联的代码一定要执行完才能继续执行后面的代码)


(1)、get请求方式


get请求方式是通过

url?

后面的参数值传送的(根据后端提供的接口请求参数来传入传输的,多个参数之间用&连接)(格式要正确填写)

(ajax参数的格式都是

参数名1=参数值1&参数名2=参数值2....



注意:get请求存在如下两个问题



1.

会缓存

(其实我们后台数据已经变了,我们希望在刷新地址栏的时候,页面数据会变动。但是因为get请求方式地址不改变,内容就不会变。) 这时我们需要在url?后面连接一个随机数,时间戳

new Date().getTime()

(这样就每一次访问的都是不一样的地址)

2.

中文会出现乱码

用编码

encodeURI()

解决

如:

xhr.open('get','get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);


(2)、post请求方式


请求数据的参数是在请求头中(那么数据就不能直接在url后面传入参数了)。

xhr.open('post','post.php',true);
//一定要申明发送的数据类型(ajax没有默认的编码方式,表单提交有)
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//post请求方式,数据放在send()里面作为参数传递
xhr.send('username=刘伟&age=30');


注意

:post没有缓存问题(无需设置时间戳),也不会有出现中文乱码问题(无需编码)



3、使用ajax对象下面的send()方法

向服务器发送请求。

(1)、get方式,无需传入参数

xhr.send()

(2)、post方式,需要传入后台需要的参数

xhr.send(‘多个参数使用&分隔’)



4、等待服务器响应并返回数据

下面介绍ajax对象下面的属性,当有它们的值有相关变化时,说明服务器有相关的响应了。


readyState

: ajax工作状态(有五个值)

0 (初始化)还没有调用open()方法

1 (载入)已调用send()方法,正在发送请求

2 (载入完成)send()方法完成,已收到全部响应内容

3 (解析)正在解析响应内容

4 (完成)响应内容解析完成,可以在客户端调用了


onreadystatechange

: 当readyState改变的时候触发(可能会触发很多次)


responseText

: ajax请求返回的数据内容就被存放到这个属性下面(通过调用这个属性就能获取到返回的内容,均为字符串格式)


status

: 服务器状态,http状态码(容错处理)

http状态码:
1xx:指示信息——表示请求已接收,继续处理
2xx:成功——表示请求已经被成功接收
3xx:重定向——要完成的请求必须进行进一步操作
4xx:客户端错误——请求有语法错误或者请求无法实现
5xx:服务器错误——服务器未能实现合法的请求



三、jq和 js的完整请求方式(只介绍常用的语法)

我们都知道在jquery中使用ajax很方便,因为已经帮我们封装好了。



1、jquery使用ajax:
$.ajax({
	url : '请求的接口地址url',
	data : '需要传给后台的参数',
	type : 'post',   //默认是get
	dataType:"json",  // 预期服务器返回的数据类型,默认为json
	success : function(data){   //成功获取数据后的回调函数
		// data为后台返回的数据,通过处理data数据来渲染页面
	},
	error : function(err){        //获取数据失败后的回调函数
		// err 为后台请求错误后返回的错误信息
		console.log(err)
	}
});


2、javascript封装ajax(只封装了get和post请求方式),使得像jquery的使用方式

//封装实参覆盖形参的函数
function extend(obj1, obj2) {
    for (var attr in obj2) {
        obj1[attr] = obj2[attr];
    }
}
// 将data中传入的json对象转为name=winne&age=18&like={"jk":2}&arr=[1,2]这种格式
function paramData (json) {
	let str = ''
	for (let key in json) {
		if (typeof json[key] === 'object') {
			str += `${key}=${JSON.stringify(json[key])}&`
		}else{
			str += `${key}=${json[key]}&`
		}
		
	}
	return str.substring(0, str.length - 1)
	
	// 上面的代码可以用下面的代码代替
	// let resultStr = Object.keys(json).map( (key) => {
    //	let value = json[key]
   	//	if (typeof value === 'object') {
    // 		value = JSON.stringify(value)
    //	}
    //	return `${key}=${value}`
   // }).join('&')
   // return resultStr
}
function ajax(opt) {
    defaultOpt = {  //默认函数参数
    "method":'get', //默认为get传输
    "data":'',  //默认没有参数
    "url":'',
    "dataType":"json", //默认返回json类型的数据
    "success": function(data){}, //默认获取到数据后什么都不做
    "error":function(err){}
    },
   extend(defaultOpt, opt);  //配置参数赋值给默认参数
   // 创建一个支持ajax的对象
    var xhr = XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject('Microsoft.XMLHTTP'); 
    if (defaultOpt.method == 'get' && defaultOpt.data) {  //调用默认参数
        defaultOpt.url += '?' + paramData(defaultOpt.data); //get请求的完整url拼接
    }
    xhr.open(defaultOpt.method.toLowerCase() , defaultOpt.url, true);
    if (defaultOpt.method.toLowerCase()  == 'get') {
        xhr.send();
    } else if(defaultOpt.method.toLowerCase()  == 'post'){
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(paramData(defaultOpt.data));
    }
    //等待服务器响应并返回数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {                
                defaultOpt.success && defaultOpt.success(xhr.responseText);  //可变的地方用参数传入,代码块就用函数传入

            } else {
				defaultOpt.error&& defaultOpt.error(xhr);
               // console.log('出错了' + xhr);
            }
        }
    }
}


// 调用js封装好后的ajax
ajax({
	url : '请求的接口地址url',
	data : { // 传给后台的参数
		name: 'winne',
		age: 18,
		like: {jk: 2},
		arr: [1, 2]
	},
	type : 'post',   //默认是get
	success : function(data){   //成功获取数据后的回调函数
		// data为后台返回的数据,通过处理data数据来渲染页面
		// 我们最常用的是JSON.parse(data)来把字符串json转化为真正的json来进行数据处理;
		// 使用 JSON.stringfy(json)来把json数据转化为json字符串
	},
	error : function(err){        //获取数据失败后的回调函数
		// err 为后台请求错误后返回的错误信息
		console.log(err)
	}
})



版权声明:本文为m0_38134431原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。