学习笔记：简单ajax实现
Posted 爱吃煎蛋的小胖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记：简单ajax实现相关的知识，希望对你有一定的参考价值。
ajax是什么
百度：ajax是使用js向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的javascript可在不重载页面的情况与 Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
$实现
平时用的ajax调用时是这样的：
1 $.get(url, function(data){
2 console.log(data);
3 });
要实现这种方式，那就需要将$作为对象，这时，我们可以利用到立即执行函数，就可以实现
1var $ = (function() {
2 .....
3 .....
4 .....
5 .....
6 return {
7 ajax: function(opt){},
8 post: function(url, data, callback) {},
9 get: function(url, callback) {}
10 }
11})();
XMLHttpRequest
XMLHttpRequest 对象用于在后台与服务器交换数据。js的http请求发起必须通过这个对象。更多可以自己去MDN看。
1var xhr = new XMLHttpRequest();
简单Ajax实现
ajax函数中传递的是一个对象，我们拿到对象之后需要对其封装数据，如果没有给初始值的数据我们应当在ajax中做初始化处理。拿到对象时的数据处理如下。
1 var opt = opt || {},
2 type = (opt.type || 'GET').toUpperCase(),
3 async = opt.async || true,
4 url = opt.url,
5 data = opt.data || null,
6 error = opt.error || function(){},
7 success = opt.success || function(){},
8 complete = opt.complete || function(){};
XMLHttpRequest.open()，作用是初始化一个请求。其中有请求类型，请求url，同步or异步，true为异步，我们默认都为true。
1xhr.open(type, url, async);
当中有一个XMLHttpRequest.setRequestHeader()方法，作用是为请求设置请求头
最后就是XMLHttpRequest.send()方法。发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
其中还有包含了XMLHttpRequest中的属性等其它东西需要自己做下简单处理，可以查看MDN文档。
到这就能发送一个请求了。也实现了个简单的ajax。
至于get和post方法，我们只要调用ajax并给它赋初始值为get or post就好。
完整代码&检验
ajax
1var $ = (function() {
2 var xhr;
3 if (window.XMLHttpRequest) {
4 xhr = new XMLHttpRequest();
5 } else {
6 xhr = new ActiveXObject("Microsoft.XMLHTTP");
7 }
8 if(!xhr) throw new Error("error");
9 function doAjax(opt) { // 封装
10 var opt = opt || {},
11 type = (opt.type || 'GET').toUpperCase(),
12 async = opt.async || true,
13 url = opt.url,
14 data = opt.data || null,
15 error = opt.error || function(){},
16 success = opt.success || function(){},
17 complete = opt.complete || function(){};
18 if (!url) throw new Error("not url");
19 xhr.open(type, url, async);
20 type === 'POST' && xhr.setRequestHeader('Content-type',
21 'application/x-www-from-urlencoded');
22 xhr.send(type === 'GET' ? null : formatDatas(data));
23 xhr.onreadystatechange = function(){
24 if (xhr.readyState === 4 && xhr.status === 200) {
25 success(JSON.parse(xhr.responseText));
26 }
27 if(xhr.status === 404) error();
28 complete();
29 }
30 function formatDatas(obj) {
31 var str = '';
32 for(var key in obj) {
33 str += key+'='+obj[key]+'&';
34 }
35 return str.replace(/&$/, ''); //去掉最后一个&
36 }
37 }
38 return {
39 ajax: function(opt){
40 doAjax(opt);
41 },
42 post: function(url, data, callback) {
43 doAjax({
44 type: 'POST',
45 url: url,
46 data: data,
47 success: callback
48 })
49 },
50 get: function(url, callback) {
51 doAjax({
52 type: 'GET',
53 url:url,
54 success: callback
55 })
56 }
57 }
58})();
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <title>testAjax</title>
6 <script type="text/javascript" src="./ajax.js"></script>
7 </head>
8 <body>
9
10 </body>
11 <script>
12 // $.get('http://localhost:8080/ping', function(data){
13 // console.log(data);
14 // });
15 $.post('http://localhost:8080/pingPost', null, function(data){
16 console.log(data);
17 });
18 </script>
19</html>
20
go简单后端
1package main
2import (
3 "github.com/gin-gonic/gin"
4 "net/http"
5)
6func main() {
7 r := gin.Default()
8 r.Use(Cors())
9 r.GET("/ping", func(c *gin.Context) {
10 c.JSON(200, gin.H{
11 "testAjax": "getsuccess",
12 })
13 })
14 r.POST("/pingPost", func(c *gin.Context) {
15 c.JSON(200, gin.H{
16 "testAjax": "postsuccess",
17 })
18 })
19 r.Run(":8080") // listen and serve on 0.0.0.0:8080
20}
21func Cors() gin.HandlerFunc {
22 return func(context *gin.Context) { // 跨域
23 method := context.Request.Method
24 context.Header("Access-Control-Allow-Origin", "*")
25 context.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token")
26 context.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
27 context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
28 context.Header("Access-Control-Allow-Credentials", "true")
29 if method == "OPTIONS" {
30 context.AbortWithStatus(http.StatusNoContent)
31 }
32 context.Next()
33 }
34}
请求
以上是关于学习笔记：简单ajax实现的主要内容，如果未能解决你的问题，请参考以下文章