From c17d8a5c5ab5c5d41afabba0b71a62fbb6d0e1c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C=E6=9D=8E=E6=B6=9B=E2=80=9D?=
<“3014619898@qq.com”>
Date: Sun, 4 Dec 2022 23:36:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=8E=E6=B6=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../\347\254\224\350\256\260/1129Ajax.md" | 57 +++++++++
...67\346\261\202\346\226\271\345\274\217.md" | 117 ++++++++++++++++++
2 files changed, 174 insertions(+)
create mode 100644 "45\346\235\216\346\266\233/\347\254\224\350\256\260/1129Ajax.md"
create mode 100644 "45\346\235\216\346\266\233/\347\254\224\350\256\260/1201Ajax\350\257\267\346\261\202\346\226\271\345\274\217.md"
diff --git "a/45\346\235\216\346\266\233/\347\254\224\350\256\260/1129Ajax.md" "b/45\346\235\216\346\266\233/\347\254\224\350\256\260/1129Ajax.md"
new file mode 100644
index 0000000..8052973
--- /dev/null
+++ "b/45\346\235\216\346\266\233/\347\254\224\350\256\260/1129Ajax.md"
@@ -0,0 +1,57 @@
+# Ajax
+
+### 1.Ajax简介
+
+>AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
+>
+>通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：`无刷新获取数据`。
+>
+>AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
+
+### 2.XML简介
+
+>1.XML可扩展标记语言
+>
+>2.XML被设计用来传输和存储数据
+>
+>3.XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全是**自定义标签**，用来表示一些数据
+
+例如
+
+```xml
+
+ mclarencars
+ 1966
+
+```
+
+>现在是被json取代
+
+```json
+{
+ "one":{
+ "username":"mclarencars",
+ "age":"1966"
+ },
+ "two":{
+ "username":"lamborghini",
+ "age":"1963"
+ }
+}
+```
+
+### 3.Ajax的优点
+
+#### 3.1优点
+
+>1.可以无需刷新页面与服务端进行通信。
+>
+>2.允许你根据用户事件来更新部分页面内容。
+
+#### 3.2缺点
+
+>1.没有浏览历史，不能回退。
+>
+>2.存在跨域问题（同源）。
+>
+>3.SEO不友好。
\ No newline at end of file
diff --git "a/45\346\235\216\346\266\233/\347\254\224\350\256\260/1201Ajax\350\257\267\346\261\202\346\226\271\345\274\217.md" "b/45\346\235\216\346\266\233/\347\254\224\350\256\260/1201Ajax\350\257\267\346\261\202\346\226\271\345\274\217.md"
new file mode 100644
index 0000000..4bdf36d
--- /dev/null
+++ "b/45\346\235\216\346\266\233/\347\254\224\350\256\260/1201Ajax\350\257\267\346\261\202\346\226\271\345\274\217.md"
@@ -0,0 +1,117 @@
+## 一、三种常见的Ajax请求方式
+
+#### 1.jQuery发送Ajax请求
+
+>Query有三种发送请求方法:
+>
+>当你只是简单的请求数据,可以直接使用前两种方式请求,当你需要设置的东西较多的时候,可以使用`$.ajax()`方法
+
+##### 1.2.1 $.get()
+
+```javascript
+ $('button').eq(0).click(function(){
+ $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
+ console.log(data);
+ },'json');
+ });
+```
+
+##### 1.2.2 $.post()
+
+```javascript
+ $('button').eq(1).click(function(){
+ $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
+ console.log(data);
+ });
+ });
+```
+
+##### 1.2.3 $.Ajax
+
+```javascript
+ $('button').eq(2).click(function(){
+ $.ajax({
+ //url
+ url: 'http://127.0.0.1:8000/jquery-server',
+ //参数
+ data: {a:100, b:200},
+ //请求类型
+ type: 'GET',
+ //响应体结果
+ dataType: 'json',
+ //成功的回调
+ success: function(data){
+ console.log(data);
+ },
+ //超时时间
+ timeout: 2000,
+ //失败的回调
+ error: function(){
+ console.log('出错啦!!');
+ },
+ //头信息
+ headers: {
+ c:300,
+ d:400
+ }
+ });
+ });
+```
+
+
+
+## 二、jsonP的使用
+
+```javascript
+ // 1. 动态的创建一个 script 标签------------------------------------------------------------
+ var script = document.createElement("script");
+ //2. 设置 script 的 src， 设置回调函数
+ script.src = "http://localhost:3000/testAJAX?callback=abc";
+ function abc(data) {
+ alert(data.name);
+ };
+ // 3. 将 script 添加到 body 中
+ document.body.appendChild(script);
+
+ // 4. 服务器中路由的处理------------------------------------------------------
+ router.get("/testAJAX", function (req, res) {
+ console.log("收到请求");
+ var callback = req.query.callback;
+ var obj = {
+ ame: "孙悟空",
+ age: 18
+ }
+ res.send(callback + "(" + JSON.stringify(obj) + ")");
+ });
+```
+
+#### 2.1jQuery发送jsonP请求
+
+```javascript
+//前端代码-----------------------------------------------------------------------------------
+$('button').eq(0).click(function () {
+ $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) {
+ $('#result').html(`
+ 名称: ${data.name}
+ 校区: ${data.city}
+ `)
+ });
+});
+
+//服务端代码-----------------------------------------------------------
+app.all('/jquery-jsonp-server', (request, response) => {
+ // response.send('console.log("hello jsonp")');
+ const data = {
+ name: '尚硅谷',
+ city: ['北京', '上海', '深圳']
+ };
+ //将数据转化为字符串
+ let str = JSON.stringify(data);
+ //接收 callback 参数
+ let cb = request.query.callback;
+
+ //返回结果
+ response.end(`${cb}(${str})`);
+});
+```
+
--
Gitee