ajax

ajax

如何和后端交互

form表单提交 范例

• submit 的时候会自动提交到action上
• 这个方法非常老
• 提交的时候页面会发生跳转，跳转到另一个页面上
• 不知道后台如何回应这个方法，或者是直接不回应了

ajax

• asynchronous JavaScript and XML
  ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互

怎么实现

• XMLHttpRequest
• fetch兼容

javascript中常见的异步有哪些

• 可以做一些设置，可以发一些请求，具有异步和同步的功能
• 分为同步和异步，在5min内的请求达到我们的需求的时候，我们学的异步的时候
• setHTML
• onclick
• ajax

同步获取数据

• xhr.open(‘GET’,’/hello.json’,true)

从hello.json中使用get方法同步获取数据
等待发送的请求发送完之后再获取数据

var xhr = XMLHttpRequest()
xhr.open('GET','/hello.json',true)
xhr.send()
var data = xhr.responseText
console.log(data)

异步获取数据

var xhr = XMLHttpRequest()
xhr.open('GET','/hello.json',false)
xhr.send()
xhr.addEventLisrener('load',function(){
	var data = xhr.responseText
	console.log(data)
})

里面的数据不会识别是否发生变化，要在addEventListener中添加一个新的数据

var xhr = XMLHttpRequest()
xhr.open('GET','/hello.json',false)
xhr.send()
xhr.addEventLisrener('load',function(){
	if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)
	var data = xhr.responseText
	console.log(data)
}else{
	console.log('error')
}
)

onreadystatechange

var xhr = new XMLHttpRequest()
xhr.open('GET','/hello.json',true)
xhr.send()
console.log('readyState:',xhr.readyState)
xhr.addEventListener('readystatechange',function(){
	console.log('readyState',xhr.readyState)
})

汇总后

xhr.onreadystatechange = function(){
	if(xhr.readyState === 4 && xhr.status === 200){
		console.log(xhr.response.Text)
	}
}

xhr.readyState是指的是指服务器的准备状态，
在这个准备的状态，

post请求

var xhr = new XMLHttpRequest()
xhr.open('GET','/hello.json',true)
xhr.send('username=jirengu&password=123')

什么是status 什么是readyState

readyState，是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤，使用“ajax.readyState”获得

status，status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码
在HTTP1.1协议下，HTTP状态码总共可分为5大类
（是指无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，使用“ajax.status”获得）

总体理解：可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。

使用githubpagesmock数据

• 确定数据的结构
• 确定需要哪些接口
• 利用自己构造的假数据去模拟服务器

Question

ajax 是什么？有什么作用？

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

如何 mock 数据？

使用 http://easy-mock.com/
使用 http://rapapi.org/org/index.do
使用 server-mock

把GET和POST类型的ajax的用法手写一遍

//GET
var xhr = new XMLHttpRequest()
	xhr.open('GET','/weather.php?username =jake&password=123456',true)
	xhr.send()
	xhr.addEventListener('load',function(){
		if(xhr.status > 200 || xhr.status < 300 || xhr.status === 304){
			var data = xhr.responseText()
			console.log(data)
		}else{
			console.log('error')
		}
	})

//POST
  var xhr = new XMLHttpRequest()
	xhr.open('POST', '/login',true)
	xhr.onload = funciton(){
		if(xhr.readystatus === 4 && xhr.status === 200){
			var data = xhr.responseText()
			console.log(data)
		}else{
			console.log('error')
		}
	}

封装一个ajax函数，能实现如下方法的调用

	function ajax(opts){
		var url = opts.url
		var type = opts.type || 'GET'
		var dateType = 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.readystatus === 4&& xhr.status === 200){
				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()
		}
	}
	ajax({
	    url: 'http://api.jirengu.com/weather.php',
	    data: {
	        city: '北京'
	    },
	    onsuccess: function(ret){
	        console.log(ret)
	    },
	    onerror: function(){
	        console.log('服务器异常')
	    }
	})