2020-11-16ajax的原生代码封装和网络请求技术的汇总

最新推荐文章于 2024-10-27 17:48:32 发布

樱花树下'

最新推荐文章于 2024-10-27 17:48:32 发布

阅读量152

点赞数 1

文章标签： ajax mvc

本文链接：https://blog.csdn.net/html_xiaojiu/article/details/109727610

版权

一，ajax的封装

 <script>
        //封装
         var $ = {
             get:function(path,cb){
                var xhr = new XMLHttpRequest()||new ActiveXObject("XHMHTTP.Microsoft");
                    xhr.open("GET",path);
                    xhr.send();
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState==4&&xhr.status==200){
                           cb(xhr.responseText);
                 }
             }
             }
         }

         //调用
         function fn(){
            $.get("/op",(date)=>{
               console.log(date,2222);
           })
         }
          
    </script>

是使用更加的简单就像是jq的使用方法一样简洁回调函数在网络请求完成后执行

二，不同种类的网络请求

地址栏
请求到的代码是不会执行的浏览器读不懂js语言是js引擎读懂的
获得当前的网址 window.location.href
1.发起网址请求的时机:当用户输入网址,按下回车或者点击跳转按钮
2.后端返回的数据:
2.1如果浏览器能读取,就会按照对应的方式读取(图片就渲染 html文件就解析 txt,css,js文本文档内容显示)
2.2如果浏览器读不懂,就会下载到指定路径
3.给后端发送数据包的传输方式:GET,没有POST方式

a标签
1.发起网址请求的时机:点击时
2.1如果是锚点的功能,就不会发网络请求,指向锚 href==>name top

顶部

2.2如果是连接的功能,href是一个网址,就会发起网络请求
3.后端返回数据:
3.1如果浏览器能读取,就会按照对应的方式读取(图片就渲染 html文件就解析 txt,css,js文本文档内容显示)
3.2 如果浏览器读不懂,就会下载到指定路径
4.给后端发送数据包的传输方式:GET,没有POST方式

img
1.发起网址请求的时机:代码运行到它的src属性时(标签翻译,js)
2.后端返回的数据:
2.1是能够渲染的编码就渲染
2.2不是能渲染的编码就不会渲染也不会下载到本(但是数据还是过来了的)
3.给后端发送数据包的传输方式:GET,没有POST方式

form
1.发起网址请求的时机:点击时
2.前端给后端发送数据的数据包,会打包表单内部的输入控件的值
3.后端返回数据:
3.1如果浏览器能读取,就会按照对应的方式读取(图片就渲染 html文件就解析 txt,css,js文本文档内容显示)
3.2如果浏览器读不懂,就会下载到指定路径
4.给后端发送数据包的传输方式:GET,POST等等方式

link
运行到这个代码的href属性时就会发起网络请求(标签翻译,js)
rel属性决定了后端返回的数据怎么使用
给后端发送数据包的传输方式:GET,没有POST方式

ajax
发送网络请求的时机: xhr对象send后 (不是说非要写了onreadystatechange事件才会发送,这个事件仅仅是为了获取接受到的数据)

后端返回的数据用onreadystatechange事件来获取,数据放在xhr.responseText xhr.responseXML xhr.body xhr.status xhr.等等

前端给后端传输数据: get数据放在url(send方法里面的数据不会被发送给后端,但是不报错) post放在body体(send方法里面的数据)

script==>jsonp
难点,重点
跨域

服务器
服务器的代码也可以请求另外一台服务器的数据

flash 已经夕阳技术了

三，get请求的参数

 <button onclick="fn()">jq</button>
    <script>
        //封装
         var $ = {
             get:function(path,cb){
                var xhr = new XMLHttpRequest()||new ActiveXObject("XHMHTTP.Microsoft");
                    xhr.open("GET",path);
                    xhr.send();
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState==4&&xhr.status==200){
                           cb(xhr.responseText);
                 }
             }
             }
         }

         //调用
         function fn(){
            $.get("/op?username=xiaoweng&age=18&sex=male",(date)=>{
               console.log(date);
           })
         }
      
          
         //也可以直接使用函数来进行传递
         //get的传参可以是放在地址栏之中的传递  可以是标准格式  也可以是不标准的格式 但是后者后端没有对应的解析就无法使用数据
        //  注意点:有些技术是隐式的拼接到url  最终参数还是拼接在url上
    </script>

var http = require("http")
var fs = require("fs")
var url = require("url")
var querystring = require("querystring")

http.createServer(function(req,res){

     var pathname = url.parse(req.url).pathname
         console.log(pathname);//端口号之后  ？之前的字符串
     var queryobj = querystring.parse(url.parse(req.url).query)
                               //将前端传过来的数据一键值对形式存放在对象里面
         console.log(queryobj);
       fs.readFile(__dirname+req.url,function(err,date){
              if(!err){
                     res.end(date)
              }
              if(pathname =="/op" ){
                  res.end("66666"+queryobj.username)
              }
       })
}).listen(8888)

四，post请求

         post请求  query参数数据也是可以url网址中的
		 data数据是send传给后端的,肉眼不可见
		 后端需要解析数据包
		 只有post请求 send方法中的数据才会被发送到后端

if (!err) {
			res.end(data)
		}
		if (pathname == "/ajax1") {
			var container=""
            req.on("data",function(fb) {
            	container+=fb
            })
			req.on("end",(fb)=>{
				console.log(container)
				res.end(JSON.stringify(container))
				
			})
			
			
		}

post 的代码需要解析直接是看不见的。

五，mvc

服务器

var http=require("http")
// var fs=require("fs")
// var url=require("url")
// var querystring=require("querystring")
var router=require("./router.js")
var controller=require("./controller.js")
http.createServer((req,res)=>{
	 // var pathname=url.parse(req.url).pathname
	 //  http://ip:port/index.html?page=20
	 
	 
	 //路由网址
	 //静态资源接口
	 // fs.readFile(__dirname+"/sr"+pathname,(err,data)=>{
		//  //数据接口
		//  // if(pathname="/ajax1"){}
		//  // if(pathname="/ajax2"){}
		//  // if(pathname="/ajax3"){}
		//  // if(pathname="/ajax4"){}		 
	 // })
	 
	 router.request(req,res)	
}).listen(8080)



//注册路由网址
router.use("/ajax1",controller.getinfo)

router.use("/ajax2",controller.getinfo2)

router.use("/ajax3",controller.getinfo3)

router.use("/car",controller.car)

//MVC
//  C: controller 控制器==>控制业务流程逻辑的
//  V:view 页面==>姿态模板资源
//  M:Model数据模型==>数据库提供的

var fs=require("fs")
var url=require("url")
var controller=require("./controller.js")
module.exports={
	targettb:{},
	request(req,res){
		var pathname=url.parse(req.url).pathname
		fs.readFile(__dirname+"/src"+pathname,(err,data)=>{
			if(!err){res.end(data)}
			else{
				if(this.targettb[pathname]){this.targettb[pathname](req,res)}
				else{
					res.end("404")
				}
			}
		})
	},
	use(url,cb){
		//注册网址对应上函数
		this.targettb[url]=cb
	}
	
}

//request什么时候执行?  用户没请求一次他就调用一次


// var obj={}
// var b="age"
// obj[b]=200

// var a="age"
// obj[a]

写自己的业务代码实现怎样的功能

module.exports={
		getinfo(req,res){
			
			//var data=getdata()
			res.end("data")
		},
		getinfo2(req,res){
			
			res.end("666666")
			
		},
		getinfo3(req,res){
			res.writeHead(200,{"Content-Type":"text/json","chartset":"utf8"})
			res.end("下课了")
			
		},
		
		car(req,res){
			res.writeHead(200,{"Content-Type":"text/json","chartset":"utf8"})
			res.end("真的下课了")
		}
		
}