1.ajax 是什么?有什么作用
Asynchronous JavaScript + XML(异步JavaScript和XML), 其本身不是一种新技术,而是一个在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。
2.如何 mock 数据?
1.安装Node.js ,通过http-server开启本地服务器
获取端口http://localhost:8000
然后通过在文件夹创建html和json文件来测试数据
2.通过线上来mock数据
使用 https://easy-mock.com
使用 http://rapapi.org/org/index.do
3.GET 和 POST 类型的 ajax 的用法
xhr.open('GTE','/login?username=abc&password=123',true)
xhr.onload= function(){
if(xhr.status>=200 && xhr.status<300 || xhr.status=304){
console.log(xhr.responseText)
}else {
console.log('服务器出错!')
}
}
xhr.onerror= function(){
console.log('服务器出错!')
}
xhr.send() //GET的用法,拼接的数据放在open的第二个参数中
var xhr= new XMLHttpRequest()
xhr.timeout= 1000
xhr.open('POST','/login',true)
xhr.addEventListener('load',function(){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
var data=xhr.requestText
console.log(data)
}else {
console.log('服务器储出错!')
}
})
xhr.ontimeout= function(){
console.log('请求超时')
}
xhr.onerror= function(){
console.log('服务器出错!')
}
xhr.send('usernsme=abc&password=123')
//POST的用法,数据需放在send中
4.封装一个 ajax 函数,能实现如下方法调用
function ajax(options){
//补全
}
ajax({
url: 'http://api.jirengu.com/weather.php',
data: {
city: '北京'
},
onsuccess: function(ret){
console.log(ret)
},
onerror: function(){
console.log('服务器异常')
}
})
function ajax(opts){
var url = opts.url
var type = opts.type || 'GET'
var dataType = opts.dataType || 'json'
var onsuccess = opts.onsuccess || function(){}
var onerror = opts.onerror || function(){}
var data = opts.data || {}
var dataStr = []
for(var key in data){
dataStr.push(key + '=' + data[key])
}
dataStr = dataStr.join('&')
if(type === 'GET'){
url += '?' + dataStr
}
var xhr = new XMLHttpRequest()
xhr.open(type, url, true)
xhr.onload = function(){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//成功了
if(dataType === 'json'){
onsuccess( JSON.parse(xhr.responseText))
}else{
onsuccess( xhr.responseText)
}
} else {
onerror()
}
}
xhr.onerror = onerror
if(type === 'POST'){
xhr.send(dataStr)
}else{
xhr.send()
}
}