ajax.md · zorozhou/notes

#### 什么是ajax
> Ajax是javascript的一个技术，通过浏览器实现的XMLHttpReqeust对象来使得网页上的数据可以被局部更新
>
#### jq中发送ajax方法
> 错误提示：如果参数名称编写错误，服务器可能有两种处理方式
> > 1. 服务器自动忽略错误的参数
> > 2. 服务器提示参数错误
* $.get请求
> 格式：$.get(url地址，给服务器的参数，回调函数用来接收服务器响应回来的数据)
---
* $.post请求
> 格式：$.get(url地址，给服务器的参数，回调函数用来接收服务器响应回来的数据)
> 使用场景：客户端需要将数据交给服务器，一般都是post请求
---
* $.ajax方法  
> 格式：$(url,[settings]) 第二种更常用：$.ajax([settings])
```javascript
$.ajax({
    url: '',
    type: '',
    data: {},
    dataType: 'json',   // 最好设置一下数据类型
    success: function(resData){
        console.log(resData);
    }
 })
```

#### URL编码
> URL编码作用：用来解决危险字符串提交到服务器，从而导致服务器出错的一种安全措施
> 浏览器会自动将中文字符转成URL编码格式
> URL编码格式：以 % 加数字和字母的格式来进行转码

#### jq中的 serialize() 方法
> 作用：快速获取form表单中的带name属性的元素数据，并用key=value&符号进行连接
> 注意：name属性必须写，只会拼接带有name属性的表单元素，并且name属性名要写的和接口需要的字段参数名一致，方便直接传参

#### 隐藏域的巧妙使用

* 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发数据，以利于被处理表单的程序所使用

* serialize只能在jq中收集form表单中带name属性的表单元素的值，但是文件不可以，文件要用formData来收集，但是可以将要发送的文件放到隐藏域中，方便通过serialize直接收集

```js
  <input type="hidden" name="id" value='{{id}}'>
  <input type="hidden" name="img" value='{{img}}'>
  把要发送的id和图片链接放入隐藏域中，下面就可以通过serialize直接收集
  ```

#### 阻止form表单默认提交行为（刷新页面）
> 能触发form表单提交（submit）行为的元素，也就是说，这两个事件事件触发，表单的submit事件会默认触发，会自动刷新页面（前提是这两个按钮要在form表单元素内部）
> > <input type="submit" />
> > <button />
* 阻止方法：e.preventDefault()，给表单加或者那两个表单元素都可以
```javascript
$('#form').submit(function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    //调用jq的serialize()方法，快速拼接带name属性的表单元素
    let params_str = $('#form').serialize();
})
```

#### FormData对象

* 有文件参与的，一般都要用formData

* FormData是h5新增的一个对象，可以以键值对的形式来保存数据，特别是能够保存文件，图片等数据
* FormData对象主要是用来配合ajax进行文件上传的
* formData可以收集指定表单中拥有name属性的表单元素的value值，但是它有自己的编码格式的数据处理方式，同时它可以收集file表单元素的值，所以一般用于文件上传的场景
> 使用方式：
```javascript
1. 实例化FormData对象
let formData = new FormData()
2. 需要将保存的数据以 key/value 的形式保存
formData.append(key,value)
例如：
formData.append('name','zoro')
```

#### 文件上传
* ajax实现上传文件功能js逻辑代码
> 注意：ajax方法如果发送的是FormData类型的数据，则必须保证以下两个参数的固定写法：（这两个是jq的属性，原生ajax不需要）
> > contentType:false
> > processData:false

#### jq入口函数注意事项
> jq中入口函数`$(function(){})`相当于一个局部作用域，如果点击事件等事件直接注册在html结构上，此时函数的书写（定义）需要写在入口函数外面，也就是script标签内部，如果写在入口函数内部，此时拿不到函数，会报错，以后书写代码，入口函数内部尽量只做事情，函数功能的封装尽量写在入口函数外面
```javascript
<button onclick="test()" />
<script>
    $(function(){
    })
    // html结构上绑定的函数，这个函数需要写在入口函数外面，不然拿不到
    function test() {
    }
</script>
```

#### art-template模板引擎
* 1. 新建一个html页面，通过script标签导入 template-web.js 文件
* 2. 定义一个符合 art-template格式要求的模板（其实id可以自己定义），也就是在script标签里写一个id（自己定义），type类型是 text/html
* 3. 使用template模板传入模板和数据后会自动生成html字符串后添加到网页上

```javascript
<script id="temp" type="text/html">
    {{each data}}
    	<li>
            <a>{{$index}} - {{$value.name}}</a>
			<span>{{$value.age}}</span>
        </li>
    {{/each}}
</script>
<script>
    let resData = {
        data: {
            name: 'zoro',
            age: 22
        }
    }
   	let lisHtml = template('temp',resData)
    //或者这样写
    let lisHtml2 = template('temp',{data: resData.data})
</script>
```

#### 原生ajax发送请求
> 1. 第一步：创建XMLHttpRequest对象
> 2. 第二步：准备发送，调用open方法，xhr.open(type,url,boolean)，该方法具有三个参数
> 3. 第三步：发送，调用send方法（post请求的参数放这里面）
> 4. 第四步：处理请求
```javascript
xhr.onload = function() {
     let xhrStr = xhr.reponseText();
    //注意此时直接拿到的xhrStr是一个json格式的字符串，需调用           JSON.parse()
}
```
* **注意：post请求需要设置请求头（如果是formData格式则不需要）**
```javascript
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(params);
```

#### ajax实现文件上传并展示上传进度
* 上传进度展示核心代码是xhr.upload.onprogress回调函数，但是要注意一定要写在send()方法前面
```javascript
在html上先做好进度条的结构和样式，然后在ajax上传文件 send 之前写上如下代码
xhr.upload.onprogress = function(e) {
     // e.total：上传文件的总大小
     // e.loaded：代表已上传大小
     // e.lengthComputable表示文件是可以被计算的
     if (e.lengthComputable) {
        let p = e.loaded / e.total * 100;
        progress.style.width = p + '%';
     }
}
...
下面在正常处理file文件和formData对象，然后发送send

jq中实现文件上传进度是在xhr属性中写上面代码，再把 自己命名的xhr对象return出去
```
#### ajax请求超时处理
* 作用：释放浏览器的资源
> 当一个ajax请求服务器迟迟不响应的时候，我们可以通过设置超时处理，来自动让浏览器终止当前的请求达到释放浏览器的资源，可以去执行一个新的ajax请求，因为浏览器一次只能执行5到6个ajax请求
```javascript
xhr.timeout = 你想设置的超时时间，单位是毫秒
xhr对象提供了一个timeout属性，可以设置一个毫秒数，如果在设置的毫秒数之内服务器没有响应，ajax会自动终止，这时浏览器就会释放出去做其他ajax请求
```
#### HTTP协议
* **HTTP协议：是客户端与服务器通讯要遵守的一种约定格式**
* **HTTP协议分为两个组成：**
     1. 请求报文
     2. 响应报文
* **客户端请求服务器发送过去的数据格式叫请求报文**
> 请求报文的格式：
> 1. 请求行：浏览器告诉服务器我要请求你的哪个路径，并且是通过Get还是POST来请求的，我遵守的HTTP协议版本通常是HTTP1.1版本
> 2. 请求头：浏览器把一些额外的信息发送给服务器，服务器拿着这些做响应的处理，同时会按照http1.1版本去检查这些数据的合法性
> 3. 空行
> 4. 请求体：只有浏览器在post请求的时候才会有，此时应该在请求头中带上Content-Type类型 和 Content-Length
* **服务器响应给客户端的数据格式叫做响应报文**
> 响应报文的格式：
> 1. 相应行：告诉浏览器服务器响应是否成功，其中200表示成功
> 2. 响应头：服务器告诉浏览器的一些额外的信息
> 3. 空行
> 4. 响应体：服务器的数据都是通过响应体返回给浏览器的

#### 跨域请求
* **什么是跨域：**
> 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
* **IP地址**
> 作用：唯一标识一台电脑在网络上所处的位置，相当于人的身份证号码
> IP地址分为广域网和局域网的表示
* 广域网的ip地址是在互联网的唯一标记（因特网是世界范围内最大的广域网）
* 局域网的ip地址是组织内部的一个标记
* **端口**
> ip地址代表一个电脑，端口就代表一台计算机上的某个软件
> 通过端口就可以与这个软件进行通讯了
* **同源**
> 所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
* **浏览器的同源策略**
> 同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响
* **跨域的两种解决方案**：
    > 1. **CORS跨域**
   > * 跨域资源共享，表现形式服务器在响应报文头中增加了三个头信息来允许跨域访问的       
   >
   > 2. **JSONP跨域**
   * 核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来
    **注意点：JSOPN的缺点是只能支持GET请求，不支持POST请求**
    JSONP跨域需要前端有特定代码并且需要后端开发接口人员配合处理才能完成
```javascript
 // jsopn的跨域请求代码(jq中)
$.ajax({
    type:'get',
    url:'http://127.0.0.1:3001/getStudentsJSONP.js',
    dataType:'jsonp',  // 将dataType 修改成 jsonp jqueryajax方法就能自动实现jsonp的跨域请求
    success:function(resData) {
        console.log(resData)
    }
})
```

#### jsonp跨域原理

* jsonp跨域本质上是利用了script标签的src属性的天然跨域特性来实现的
* src没人规定只能请求js文件，只不过返回的结果默认会以js语法来解析
* jsonp只能发起get请求
* jsonp跨域严重依赖服务器的配置，服务器一定要返回符合js请求的字符串，在数据接口中，一定要返回函数的调用形式，且在函数调用形式中拼接后台数据

```js
<script src="http://127.0.0.1:3008/getdata?callback=test"></script>
```

#### Ajax获取服务器返回的XML数据并解析

> 因为现在的服务器响应回来的数据格式：99%都是json但是有一些比较老的服务器是返回xml格式

#### 防抖和节流
* **防抖**
> 在事件被触发的n秒后在执行回调，如果在这n秒内又被触发，则重新计时
* **节流**
> 每隔一段时间，只执行一次函数

#### URL.createObjectURL()的使用方法
* 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
* 生成一个本地可以访问的地址
```javascript
// 注意：files[0]是原生js方法，不可以通过js获取元素进行获取
let file = document.getElementById('file').files[0];
img.src = URL.createObjectURL(file);
```

#### 写jq注意事项

* jq入口函数内最好写函数的调用，至于函数的功能可以写在入口函数外面
* html结构上绑定的事件，一定要在入口函数外面定义使用，否则拿不到，因为存在一个作用域的问题
* 同时这样绑定的事件想拿事件对象`e`只能通过在js代码中` window.event`来拿

```javasc
<div onclick="change()"></div>
<script>
	$(function(){
		// 在入口函数这里写这个绑定的函数会报错，因为作用域的问题拿不到
	})
	// 因此要在这里写
	function change(){
		let e = window.event;
	}
</script>
```

* **ajax自身提供了一个所有请求都会经过的函数**

> 所有请求都会经过--可进行拦截请求，可在这里统一设置token传递

```js
$.ajaxSetUp({
    beforeSend:function(xhr) {
        let token = localStorage.getItem('myToken')
        if (token) {
            xhr.setRequestHeader('Authorization','Bearer' + token)
        }
    }
})
```

zorozhou/notes

简介

发行版

贡献者

近期动态

zorozhou/notes .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

zorozhou/notes