Ajax基础

Ajax（异步）

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

Ajax的同步和异步

同步
实例解释：1个人在麦当劳买东西，当这1个人点完单后，服务员会去取相关的餐品，将相关的餐品打包好后，再递给这个人，完成一次服务，才能够继续为下一个人服务。
Ajax同步请求操作
1、js发送一个请求去请求数据
2、js等待后台返回数据
3、js处理完返回数据后再执行后面的操作

异步（高效）
实例解释：在购买排队过程中时，不需要完全等待前1个服务完成，才轮到下一个人，尽量不等待
ajax异步请求操作
1、js发送一个请求去请求数据
2、js不等待后台返回数据，js（直接）执行后面的操作
3、后台返回数据后，js才处理后台返回的数据

Ajax的实现流程

1、创建Ajax对象

  var xhr = new XMLHttpRequest()

2、设置请求的方法及路径（GET,POST）

xhr.open("GET","http://127.0.0.1:8848/1ajax/abc.txt")

3、发送数据（已经填写的数据）

xhr.send()

4、设置一个监听事件，监听后台是否返回数据

xhr.onreadystatechange = function(){
  if(xhr.status==200&&xhr.readyState==4){
		console.log("成功获取数据")
		console.log(xhr)
	    console.log(xhr.status)
	    console.log(xhr.readyState)
      //通过status与readyState来进行判断事件是否成功
	    }
	}

5、处理数据

  // 拿到响应的对象
		var res=xhr.response;
		// 将对象写在页面上   
		var h1=document.createElement("h1")
		// 将响应的内容设置为显示的内容
		h1.innerHTML=res;
		// 将响应内容添加到body中
		document.body.appendChild(h1)

代码运行所查看到的控制台结果

请求方法

请求方法有GET和POST两种方法

xhr.open("POST","http://127.0.0.1:8848/1ajax/abc.txt")//POST请求方法
xhr.open("GET","http://127.0.0.1:8848/1ajax/abc.txt?username=admin&password=123456")//GET请求方法

GTE和POST的区别

GET直接将表单提交的数据放在路径里面，效率高
POST将表单的数据放在请求的body里面，数据大，安全（账号密码）

Ajax封装

   var fn = function(xhr){
		console.log(xhr)
	    var h1=document.createElement("h1")
		h1.innerHTML=xhr.response;
	    document.body.appendChild(h1)
			}