Ajax技术

一、概念

Ajax ： async javascript and XML(异步JavaScript和XML)

• 不是新的编程语言 而是一种使用现有标准的新方法
• Ajax 是一种独立于 Web 服务器软件的浏览器技术
• 是一种创建交互式网页应用的网页开发技术
• 是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术
• 是前后台交互的能⼒ 是客户端给服务端发送消息及接收响应的⼯具
• 局部刷新 即当执行网页中的一部分代码时,不用提交整个网页,只需提交改动的网页的局部信息

二、使用

(一) Ajax请求

  1）创建一个ajax对象

•  用 js 中内置的构造函数来创建 ajax 对象

let xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest 对象：

属性	描述
onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件的处理器
readyState	请求的状态 0：未初始化 1：正在加载 2：已加载 3：交互中 4：完成
responseText	服务器的响应，返回数据的文本
responseXML	服务器的响应，返回数据的兼容DOM的XML文档对象，该对象可以解析为一个DOM对象
responseBody	服务器返回的主题
responseStream	服务器返回的数据流
status	服务器的HTTP状态码（如 404：未找到，200：成功  等）
statusText	服务器返回的状态文本信息，HTTP状态码的相应文本

  2）配置连接信息

• xhr.open('请求方式', '请求地址', 是否异步)

• 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
• 第⼆个参数是本次请求的 url 
• 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步

 xhr.open("GET", "./test/ajax.html")   

  3）向服务器发送请求

• xhr.send()

xhr.send()

  4）接收服务器端的响应数据 

 (二) 状态码

  1）readyState

• 表示一个 ajax 请求的全部过程中的某一个状态

 readyState == 0 : 表示未初始化完成 即open 方法还没有执行 
 readyState == 1 : 表示配置信息已经完成 即执行完 open 之后 
 readyState == 2 : 表示 send 方法已经执行完成
 readyState == 3 : 表示正在解析响应内容
 readyState == 4 : 表示响应内容已经解析完毕 可以在客户端使用了
 故只有当 readyState == 4 的时候，我们才可以正常使用服务端返回给我们的数据

  2）status 

•  记录本次请求的 http 状态码  （200 ~ 299）

当两个状态码都满足要求的时候（readyState == 4 & http (200~299) ），本次请求正常完成

  3） readyStateChange

• 监听 readyState 值改变的的行为 即只要 readyState 的值发生变化就会触发该事件

 (三)实例 

 //  index.html文件
<button onclick="load()">Ajax请求数据</button>
<script>
    function load(){
        //1.创建ajax对象，兼容IE
        let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")                
        //2.配置连接信息  参数：get/post|网址|是否异步(布尔)  默认为异步true
        xhr.open("GET", "/ajax?name=haha&age=21", true)           
        //3.发送网络请求
        xhr.send()                
        //4.等待服务器响应
        // 监听并对不同的响应状态进行处理
        xhr.onreadystatechange=function(){
            if (xhr.readyState == 4 && xhr.status == 200) {
                    //console.log("网络请求成功，业务数据正确")
                    console.log(xhr.responseText)
            } else if (xhr.readyState == 4 && xhr.status == 404) {
                    //console.log("网络请求成功，业务数据错误")
                    console.log(xhr.responseText)
                    var obj=JSON.parse(xhr.responseText)
                    console.log(obj)
            }
        }
    }
</script>

//  index.js 文件
var mime=require("mime")
var url=require("url")
var querystring=require("querystring")
var http=require("http")
var fs=require("fs")

var app=http.createServer((req,res)=>{
	var urlobj=url.parse(req.url)
	var pathname=urlobj.pathname
	if(pathname=="/"){pathname="/index.html"}
	var path=__dirname+"/src"+pathname
	fs.readFile(path,(err,data)=>{
		if(!err){
			var type1=mime.getType(path) 
			res.setHeader("content-Type",type1) 
			res.end(data)
		}
        else if(pathname=="/ajax"){    
            res.writeHead(200,{"content-Type":"text/json"})
			let queryobj=querystring.parse(urlobj.query)   
			console.log(queryobj)  
			res.end("{name:'haha',age:'21'}")
		}
		else {
			res.end("404 not found")
		}
	})
})
app.listen(8080)

 运行结果：