路由与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 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

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 头。 header: 规定头的名称 value: 规定头的值

POST请求的特点如下：
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求