feat(更新文章): ajax入门

package.json

@@ -11,10 +11,11 @@
     "go": "hexo cl && hexo g && gulp && hexo d"
   },
   "hexo": {
-    "version": "5.2.0"
+    "version": "5.3.0"
   },
   "dependencies": {
     "babel": "^6.23.0",
+    "commitizen": "^4.2.2",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-htmlclean": "^2.7.22",

source/_md/客户端检测.md

@@ -118,4 +118,59 @@ function isHostMethod(object, property) {
 
 ## 用户代理字符串检测
 
-用户代理字符串也就是常见的UA（UserAgent）。
+用户代理字符串也就是常见的UA（UserAgent）。考虑到各个主流浏览器的发展历史，所以UA的判断也变的比较复杂。当然对于现代更加复杂的浏览器环境来说，识别出详细的浏览器还是需要更多的检测依据。
+
+### 识别呈现引擎
+
+呈现引擎，也就是浏览器的内核。每个引擎都有一些自己的特性，但是要正确的识别出引擎，关键还是识别顺序。
+
+为了不污染全局变量，这里使用局部变量的命名来命名。这个方法最终返回一个对象，这个对象就是根据检测到的引擎版本的键值对。
+
+```js
+let client = function () {
+    let engine = {
+        // 主流引擎
+        trident: 0,
+        gecko: 0,
+        webkit: 0,
+        khtml: 0,
+        opera: 0,
+
+        // 具体版本号
+        ver: null
+    }
+
+    return {
+        engine: engine,
+        whatEngine() {
+            for (let i in engine) {
+                if (engine[i]) {
+                    return i;
+                }
+            }
+        }
+    }
+```
+
+基本的变量命名都准备好了，接下来就是判断了。我们的第一步就是识别opera，因为它的用户代理字符串有可能完全模仿其他浏览器。
+
+判断opera很简单，不需要去检测ua中的字符串，它有个全局变量`window.opera`供我们检测：
+
+```js
+    if (window.opera) {
+        engine.ver = window.opera.version();
+        engine.opera = parseFloat(engine.ver);
+    }
+```
+
+第二步就是WebKit了，WebKit需要我们通过判断ua字符串内的特定内容来识别它。在客户端获取UA最好的办法就是通过`navigator.userAgent`属性。
+
+```js
+let ua = navigator.userAgent;
+let reg = /AppleWebKit\/(\S+)/;
+
+if (reg.test(ua)) {
+    engine.ver = ua.match(reg)[1];
+    engine.webkit = parseFloat(engine.ver);
+}
+```

source/_posts/某咸鱼的AJAX入门.md

@@ -1,3 +1,12 @@
+---
+title: 某咸鱼的AJAX入门🐟
+date: 2020-12-24 19:41:02
+tags: JavaScript
+categories: 笔记
+url: ajax-getting-started
+index_img: /images/某咸鱼的AJAX入门/logo.webp
+---
+
 ## Ajax
 
 AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用`XMLHttpRequest`对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
@@ -7,6 +16,8 @@ AJAX最主要的两个特性：
 * 在不重新加载页面的情况下发送请求给服务器。
 * 接受并使用从服务器发来的数据。
 
+![](../images/某咸鱼的AJAX入门/2020-12-24-19-40-22.webp)
+
 ## 发送http请求
 
 `XMLHttpRequest`方法就是发送请求必要的一个方法，通过该方法创建的实例来发送请求。
@@ -131,4 +142,67 @@ function handler() {
         console.log(httpRequest.status);
     }
 }
-```
+```
+
+## jQuery中的AJAX
+
+jquery极大的简化了原生js的一些繁琐操作，同时它也提供一些ajax方法来简化操作。
+
+### ajax方法
+
+jQuery提供了一个`$.ajax()`方法，方便去操作ajax。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见`$.get`,`$.post`等。`$.ajax()`返回其创建的 XMLHttpRequest 对象。大多数情况下无需直接操作该函数。
+
+这个方法接受一个参数，这个参数为键值对集合（对象），其中包含了AJAX 请求的键值对集合，所有选项都是可选的。也可以通过`$.ajaxSetup()`设置任何选项的默认值。
+
+```js
+$.ajax({
+    url: 'test.txt',
+    async: false
+});
+```
+
+### 回调
+
+和原生js一样，jQuery也可以通过参数来设定是否同步执行（async）。当异步执行时，可以使用`success`参数来执行一个回调函数。回调函数支持传递一个参数，参数为response。
+
+```js
+$.ajax({
+    url: 'test.txt',
+    success: function (result) {
+        $('.title').html(result);
+    }
+});
+```
+
+### 其他方法
+
+jQuery同样提供了一些其他简易易用的方法，例如`load()`方法，通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
+
+按照传统的方法利用jQuery来写一个传递文本到元素可能需要这样：
+
+```js
+$(document).ready(function () {
+    $('.btn').click(function () {
+        $.ajax({
+            url: 'test.txt',
+            success: function (result) {
+                $('.title').html(result);
+            }
+        });
+    })
+})
+```
+
+而`load()`方法更加简洁，往往只可能需要一行：
+
+```js
+$(document).ready(function () {
+    $('.btn').click(function () {
+        $('.title').load('test.txt');
+    })
+})
+```
+
+不过越是简洁的方法越是难以捉摸以及不方便自定义其他的参数。
+
+无论怎么说，jQuery提供了更加便利的手段来完成原本繁琐的事情，且仅仅只是多用了300+kb的源码。