个人理解:
JavaScript通过异步的形式操作XML文档。
功能:
数据交互(获取数据,发送数据)。
特点:
异步的形式(节约用户操作时间,减少操作请求,无刷新页面的情况发送请求,可以不通过浏览器地址栏刷新发送请求,ajax内部设置模拟浏览器地址栏刷新,加载数据,可以动态的刷新数据)。
例如:
表单验证的时候,输入手机号,通过ajax发送请求,不刷新页面,进行验证。
1.创建一个ajax对象(有兼容性问题)
var xhr = new XMLHttpRequest()
ie6 以下用 new ActiveXObject('Microsoft.XMLHTTP') (ie6内部下面的插件中的XMLHTTP)
// 对象的创建(相当于打开浏览器)
var xhr = null;
// if (window.XMLHttpRequest) {
// xhr = new XMLHttpRequest()
//} else {
//xhr = new ActiveXObject('Microsoft.XMLHTTP')
//}
try (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} catch(e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
// 在地址栏输入地址
/*
open方法
参数
1.打开方式
2.地址
3.是否异步(后续的代码需要用到前面的内容需要用到同步。)
*/
/*
get方式的两个问题
参数放在url后面
1.缓存:在url?后面连接一个随机数,时间戳(&很重要)
2.乱码:(传递中文会产生乱码)
xhr.open('get','1.txt?username='+encodeURL('刘伟')+'&age=30&' + new Date().getTime(),true)
*/
xhr.open('get','1.txt?username=leo&age=30&' + new Date().getTime(),true)
/*
post方式
数据放在send()方法里面作为参数传递。(参数放在请求头中)
没有缓存问题,没有中文问题
*/
xhr.open('post','1.txt',true)
xhr.setRequestHeader('content-type','applicatuion/x-www-form-urlencoded')
// 生命发送数据的类型
xhr.send('username=leo&age=30');
// 发送请求
xhr.send();
0:
// 等待服务器返回内容
/*
readyState:ajax工作状态
0(未初始化):还没有调用open()的方法
1(载入):以调用send()方法,正在发送请求
2(载入完成):send()方法完成,已收到全部相应内容
3(解析):正在解析响应内容
4(完成):响应内容解析完成,可以在客户端调用了。
responseText:ajax请求返回的内容就被放在这个属性下面
onreadystatechange:当状态值改变时触发的事件
status:服务器状态,http状态码(自行百度吧)
*/
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success && success();
} else {
alert('出错了,Err:' + xhr.status)
}
}
}
ajax方法
function ajax (method,url,data,success) {
var xhr = null;
try (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} catch(e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
if (method === 'get' && data) {
url += '?' + data
}
xhr.open(method,url,true)
if (method === 'get' ) {
xhr.send();
} else {
xhr.setRequestHeader('content-type','applicatuion/x-www-form-urlencoded')
xhr.send(data);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success && success(xhr.responseText);
} else {
alert('出错了,Err:' + xhr.status)
}
}
}
}
jquery中的ajax
ajax({
//不传默认是get方式
// data没有可以不配置
type: 'get',
url: '',
data: '',
success:function (data) {
}
})
2.try catch
try() {
// 代码尝试执行当前代码块的内容,如果有错误,会执行catch{},并传入错误信息。
throw new Error('错误信息')
// js手动抛错(上面没有报错,添加该语句,向下执行报错。)
} catch(e){
}
网友评论