前端刷新页面有两种技术:
1、 整个页面刷新 跳转到一个新的网页html,传统的网页即是如此。
2、网页局部刷新 用js去做网络请求 ,然后将得到的数据动态的渲染到页面。
网页的局部刷新就要用到AJAX技术。
简单介绍:AJAX全称Asynchronous JavaScript and XML 它是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术;通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。
AJAX对象及其属性、方法的介绍:
想要使用AJAX技术就要知道window的一个属性XMLHttpRequest,XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。我们new XMLHttpRequest()创建一个Ajax对象。
其主要使用的方法:
open()方法 你需要调用open(DOMString method,DOMString uri,boolean async,DOMString username,DOMString password)方法初始化一个XMLHttpRequest对象。其中,method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET,POST,PUT,DELETE或HEAD)。为了把数据发送到服务器,应该使用POST方法;为了从服务器端检索数据,应该使用GET方法。另外,uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性,该uri被解析为一个绝对的URI-换句话说,你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求,需要把这个参数设置为false。对于要求认证的服务器,你可以提供可选的用户名和口令参数。在调用open()方法后,XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外,它还复位请求头部。注意,如果你调用open()方法并且此时readyState为4,则XMLHttpRequest对象将复位这些值。
send()方法 在通过调用open()方法准备好一个请求之后,你需要把该请求发送到服务器。仅当readyState值为1时,你才可以调用send()方法;否则的话,XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时,send()方法立即返回,从而允许其它客户端脚本处理继续。在调用send()方法后,XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时,它把readyState设置为4(已加载)。对于一个HEAD类型的请求,它将在把readyState值设置为3后再立即把它设置为4。
有一个事件:onreadystatechange事件
XMLHttpRequest对象有一个属性ReadyState,它有四种取值:
1 描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态;此时,响应已经被完全接收。
当readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。
常用属性:
status属性:这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText属性:这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。
responseText属性:这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
responseXML属性:此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
说了这么多,我们直接写一下原生AJAX请求服务器数据。
先建立一个服务器:
const http=require("http")
const fs=require("fs")
const url=require("url")
const querysting=require("querystring")
const mime=require("mime")
//创建
var app=http.createServer((req,res)=>{
//获取客户端输入的网址
var urlobj=url.parse(req.url)
//获得地址栏
var pathname=urlobj.pathname
//获得查询字符串
var query = url.query
//读取文件并创建静态托管
fs.readFile(__dirname+"/src"+pathname,(err,data)=>{
if(!err){
res.setHeader("content-Type",mime.getType(pathname))
res.end(data)
}
//有可能是一些数据接口,就是我们Ajax要请求的数据
else if(pathname=="/ajax"){
//返回一个假数据
//设置HTTP状态代码
res.writeHead(200,{"content-Type":"text/json"})
res.end("{name='zs',age='10'}")
}
//有可能输入错误
else{
res.end("404")
}
})
})
app.listen(8088)
编写客户端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>首页新闻</h1>
<button onclick="fn()">点击获得数据</button>
<script>
function fn(){
//创建Ajax对象
//老版本IE的Ajax对象为ActiveXObject
let xhr=new XMLHttpRequest()||new ActiveXObject()//兼容性写法
//配置连接信息
xhr.open("GET","http://172.20.10.3:8088/ajax",true)
//发送请求
xhr.send()
//等待响应 绑定onreadystatechange事件
xhr.onreadystatechange=function(){
console.log(xhr.readyState);
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText,11)
}else if(xhr.readyState==4&&xhr.status==404){
console.log(xhr.responseText,22)
}
}
}
</script>
</body>
</html>
请求结果:
得到json数据后就可以通过JSON.parse()解析得到对象,然后DOM操作页面内容