路由与ajax(第三天)
一、node.js 路由
在一个域名下,会有很多个可访问的地址,这就是路由。
我们呢,要为路由提供请求的URL和其他需要的GET及POST参数,随后路由需要根据这些数据,来决定执行哪些代码。/
因此,我们要查看HTTP请求,从中提取出来我们需要的URL以及GET/POST参数。
我们需要的这些数据都会包含在request对象中,该对象作为onRequest()回调函数的第一个参数传递。但是为了解析这些数据,我们需要额外的Node.js模块,它们分别是url和querystring模块。
url模块:
var urlobj=url.parse(req.url)
urlobj.pathname
urlobj.query
querystring模块:
//可以吧参数解析为一个对象
var queryobj=querystring.parse(urlobj.query)
url.parse(string).query
|
url.parse(string).pathname |
| |
| |
------ -------------------
http://localhost:8888/start?foo=bar&hello=world
--- -----
| |
| |
querystring.parse(queryString)["foo"] |
|
querystring.parse(queryString)["hello"]
实例 :.把当前网址的参数解析为一个对象
"/20200304/index.html?user=karen&id=123"
var urlobj=req.url.split("?")
var pathname=urlobj[0]
var queryobj={}
var arr=urlobj[1].split("&")
for(var i=0;i<arr.length;i++){
var obj=arr[i].split("=")
queryobj[obj[0]]=obj[1]
}
二、接口
1、数据接口
前端发送布局数据请求时, 后端提供数据,接受参数 ,发送前端想要的数据 。
if(req.url=="/hqyj"){
res.end('{name:"karen",age:18}')
}
2、静态资源接口
前端发送网络请求,后端提供静态资源(磁盘中文件)。静态资源托管==>网址和托管的目录对应起来 。
var urlobj=url.parse(req.url)
// console.log(urlobj)
var pathname=urlobj.pathname
var queryobj=querystring.parse(urlobj.query)
console.log(pathname,queryobj)
fs.readFile(__dirname+"/src"+pathname,(err,data)=>{res.end(data)})
三、Ajax
1、Ajax简介
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种用于创建快速动态网页的技术。
AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。
有很多使用 AJAX 的应用程序案例:Google Maps、Gmail、Youtube 和 Facebook。
2、Ajax工作原理
3、ajax的使用及实现步骤
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
1.构造ajax对象 做兼容
var xhr;
var xhr=new window.XMLHttpRequest()||new ActiveXObject("Micsoft.XMLHTTP")
2.向服务器发送请求
xhr.open(method,url,async);
xhr.send();
3.监听网络状态变化
xhr.onreadystatechange = function() {
console.log(xhr.readyState)
//当网络状态为4的时候,代表数据包已经发送过来了
//状态码为200代表是这个接口原来制定的接口数据格式
if (xhr.readyState == 4&&xhr.status==200) {}
// onreadystatechange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果。
四、请求类型:GET或POST
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xhr.open("GET","ajax_info.txt",true);
xhr.send();
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
GET 请求
一个简单的 GET 请求:
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xhr.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xhr.send();
如果希望通过 GET 方法发送信息,请向 URL 添加信息:
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send();
GET请求具有以下的几个特点:
· GET 请求可被缓存
· GET 请求保留在浏览器历史记录中
· GET 请求可被收藏为书签
· GET 请求不应在处理敏感数据时使用
· GET 请求有长度限制
· GET 请求只应当用于取回数据
POST 请求
一个简单 POST 请求:
xhr.open("POST","/try/ajax/demo_post.php",true);
xhr.send();
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");
方法 | 描述 |
---|---|
setRequestHeader(header,value) | 向请求添加 HTTP 头。
|
POST请求的特点如下:
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求