add ajaxTools

Samples/chrome-plugins/translation-rocket/js/background.js

@@ -37,25 +37,136 @@ chrome.contextMenus.create({
     chrome.browserAction.setBadgeText({ text: 'new' })
     chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] })
 
-    var xhr = new XMLHttpRequest()
-    xhr.onreadystatechange = handleStateChange // Implemented elsewhere.
-    xhr.open(
-      'GET',
-      // chrome.extension.getURL('/config_resources/config.json'),
-      // 'http://www.luoboit.cn/api/blog/post/query?Page=1&Limit=10',
-      'http://localhost:8000/Translate/Test',
-      true,
+    let ajax = httpHelp
+    let url = 'http://localhost:8000/Translate/Test'
+    ajax.get(
+      url,
+      {},
+      (res) => {
+        console.log(res)
+      },
+      (e) => {
+        console.log(e)
+      },
     )
-    // prepare form data
-    // let data = new FormData(form)
-    let data = new FormData()
-    // set headers
-    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
-    // xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
-
-    // send request
-    // xhr.send(data)
-    //访问内部位于config_resources目录下的config.json文件
-    xhr.send()
   },
 })
+
+// 常用工具函数
+var httpHelp = {
+  /* ajax请求get
+   * @param url     string   请求的路径
+   * @param query   object   请求的参数query
+   * @param successFunc  function 请求成功之后的回调
+   * @param failFunc  function 请求失败的回调
+   * @param isJson  boolean  true： 解析json  false：文本请求  默认值true
+   */
+  get: function (url, headers, successFunc, failFunc, isJson) {
+    // 拼接url加query
+    // if (query) {
+    //   var params = tools.formatParams(query)
+    //   url += '?' + params
+    //   // console.log('-------------',url);
+    // }
+
+    // 1、创建对象
+    var xhr = new XMLHttpRequest()
+    // 2、建立连接
+    // true:请求为异步  false:同步
+    xhr.open('GET', url, true)
+    if (headers) {
+      for (var key in Object.keys(headers)) {
+        xhr.setRequestHeader(key, headers[key])
+      }
+    }
+    // ajax.setRequestHeader("Origin",STATIC_PATH);
+
+    // ajax.setRequestHeader("Access-Control-Allow-Origin","*");
+    // // 响应类型
+    // ajax.setRequestHeader('Access-Control-Allow-Methods', '*');
+    // // 响应头设置
+    // ajax.setRequestHeader('Access-Control-Allow-Headers', 'x-requested-with,content-type');
+    // ajax.withCredentials = true;
+    // 3、发送请求
+    xhr.send()
+
+    // 4、监听状态的改变
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          // 用户传了回调才执行
+          // isJson默认值为true，要解析json
+          if (isJson === undefined) {
+            isJson = true
+          }
+          var res = isJson
+            ? JSON.parse(xhr.responseText == '' ? '{}' : xhr.responseText)
+            : xhr.responseText
+          successFunc && successFunc(res)
+        } else {
+          // 请求失败
+          failFunc && failFunc()
+        }
+      }
+    }
+  },
+
+  /* ajax请求post
+   * @param url     string   请求的路径
+   * @param data   object   请求的参数query
+   * @param successFunc  function 请求成功之后的回调
+   * @param failFunc  function 请求失败的回调
+   * @param isJson  boolean  true： 解析json  false：文本请求  默认值true
+   */
+  post: function (url, headers, data, successFunc, failFunc, isJson) {
+    var formData = new FormData()
+    for (var i in data) {
+      formData.append(i, data[i])
+    }
+    //得到xhr对象
+    var xhr = null
+    if (XMLHttpRequest) {
+      xhr = new XMLHttpRequest()
+    } else {
+      xhr = new ActiveXObject('Microsoft.XMLHTTP')
+    }
+
+    xhr.open('post', url, true)
+    // 设置请求头  需在open后send前
+    // 这里的CSRF需自己取后端获取，下面给出获取代码
+    // xhr.setRequestHeader('X-CSRFToken', CSRF)
+    if (headers) {
+      for (var key in Object.keys(headers)) {
+        xhr.setRequestHeader(key, headers[key])
+      }
+    }
+    xhr.send(formData)
+
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          // 判断isJson是否传进来了
+          isJson = isJson === undefined ? true : isJson
+          successFunc &&
+            successFunc(
+              isJson ? JSON.parse(xhr.responseText) : xhr.responseText,
+            )
+        } else {
+          // 请求失败
+          failFunc && failFunc()
+        }
+      }
+    }
+  },
+}
+
+// // 调用
+// // 接口地址
+// let url = ""
+// // 传输数据 为object
+// let data = {}
+
+// tools.ajaxGet(url, data, function(res){
+// 	console.log('返回的数据:',res)
+// 	// ....
+// })