Ajax相关(原生ajax，jQuery中ajax)，本地图片预览及文件类型

最新推荐文章于 2021-08-05 23:33:57 发布

itxcr

最新推荐文章于 2021-08-05 23:33:57 发布

阅读量365

点赞数

分类专栏：复习总结文章标签： Ajax

xcr

本文链接：https://blog.csdn.net/it_xcr/article/details/103338317

版权

复习总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. get和post请求

从服务端获取数据：get请求
- 请求参数在地址栏中以urlencoded形式显示
- 格式：username=xcr&userAge=18
- 通过location.search可获取当前地址栏中 ? 及其后面的请求参数内容
- 可发送 2kb左右的数据
- 只能发送文本形式的数据
- get请求可以被缓存，将地址保存，这个请求所携带的请求参数都将被保存
给服务端发送数据：post请求
- post请求的参数在请求体中，不会在地址栏中体现，发送一些隐私数据时使用post请求发送，相对get请求来说安全一些，但不是绝对安全
- 可发送数据理论上没有限制
  - 实际上会受服务端的限制
- 可发送的数据类型不限，如果需要发送文件，只能使用post请求发送
- post请求无法被缓存

2. jQuery中$.ajax的get和post请求发送的方式

$.ajax({
  type: ,  //请求方式
  url: ,   //请求的接口地址
  data: ,	 //请求参数：data是一个对象
  success: function(res){
  //请求成功后执行的函数
  }
})

3. jQuery中的`$.get`和`$.post`的使用

$.get({
  url: 'http://localhost:8080/common/get',
  data: {
    username: 'xcr',
    userAge: 18,
    password: 123456,
    gender: '男'
  },
  success: function(res) {
    console.log(res)
  }
});

$.post({
  url: 'http://localhost:8080/common/post',
  data: {
    username: 'xcr',
    userAge: 18,
    password: 123456,
    gender: '男'
  },
  success: function(res) {
    console.log(res);
  }
});

这两种书写方式是$.ajax的快捷方式

在发送简单请求时会使用如下方式

$.get('http://localhost:8080/common/get',
      function(res) {
  		console.log(res);
})

4. FormData对象的使用

用来对表单数据进行处理的一种方式，可自己随意添加数据

// 创建一个FormData对象，参数为DOM对象形式的form标签
var fd = new FormData($('#form')[0]);
// fd中包含了form中所有数据
// 如果想查看数据，可使用get方式指定查看 
// fd.get(表单元素的name)
// 添加表单元素以外的数据
// fd.append('参数名',’参数值);
fd.append('Subject', 'vue');
// 通过ajax将fd发送给服务端
// 要使用post形式发送
$.ajax({
  type: 'post',
  url: 'http://localhost:8080/common/post',
  data: fd,
  // 使用jQuery发送FormData对象，必须设置以下属性，让jQuery不处理fd这个对象
  contentType: false,
  processData: false,
  success: function(res) {
    console.log(res);
  }
})

通过FormData进行文件上传

//设置input[type=file]的name属性值必须跟接口一致
//请求发送
$.ajax({
  type: 'post',
 	url:'http://localhost:8080/formData/upload',
  data: new FormData($('#form')[0]),
  contentType: false,
	processData: false,
  success: function(res) {
    console.log(res);
  }
})

5. 原生ajax的使用方式

// 初始化一个请求，调用xhr.open();
var xhr = new XMLHttpRequest();
// get请求需要在url后自行拼接get请求的参数，使用？连接
// 形式为urlencoded：'名1=值1&名2=值2';
xhr.open('get', '请求地址');
// 发送请求 调用xhr.send()；异步任务
xhr.send();
// 响应处理部分
// 通过事件来检测ajax的进行状态,readyState是xhr的属性，用来表示ajax操作的状态, readyState属性的值是数值类型
// 0  初始化阶段,1  建立了连接,2  请求已经发送, 3  下载中, 4  下载完毕
// 必须确保readyState属性的值为4，才可以使用响应体的数据
// 原生js不会自动识别服务端响应的JSON格式的数据，需要手动转换
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    console.log(xhr.responseText);
    // 将json格式字符串转换为js数据
    console.log(JSON.parse(xhr.responseText));
  }
}

5.1 原生Ajax的get请求操作方式

var xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:8080/common/get?username=xcr');
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    console.log(xhr.responseText);
    console.log(JSON.parse(xhr.responseText));
    console.log(xhr.getAllResponseHeaders());
    console.log(xhr.getResponseHeader('Content-Type'));
   }
};

5.2 原生post请求的发送方式

// 初始化
var xhr = new XMLHttpRequest();
// 建立连接  调用open()参数1：请求方式 参数2： 请求的url地址
xhr.open('post', '请求地址');
// 发送请求： 调用send() 请求参数传入到send()的参数中，参数格式为urlencoded
// 由于post请求参数不在url中传递，需要给服务器发送一些额外的数据，即请求头
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('username=xcr&userAge=18');
// 进行响应的相关处理
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    // indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。
    // 如果indexOf()的值不返回-1，则说明判断的子串存在，就要做JSON.parse转换
    if(xhr.getResponseHeader('Content-Type').indexOf('json') !== -1) {
      console.log(JSON.parse(xhr.responseText));
    } else {
    	console.log(xhr.responseText);
    }  
  }
}

6. 检测服务端响应的内容类型

服务端的响应信息中除了有主要的数据外，还有一些额外信息，称为Response Headers响应头

获取响应头的信息，可使用以下方法

//获取所有响应头信息
xhr.getAllResponseHeaders();
//常用，获取某个响应头的信息
xhr.getResponseHeader('传入某个具体的响应头的名称')

可以通过判断Content-Type中是否是json的内容类型，从而设置对应的转换操作

7. 封装ajax相关函数

封装数据处理函数

// 传入请求参数时，书写对象形式的参数而不是urlencoded，设置一个函数进行数据格式转换
// 方式一  字符串截取方式，slice可以复制从指定位置开始到结束的字符串长度
var data = {
  usrename: 'xcr',
  userAge: 18
};
var str = '';
for (var key in data) {
  str += key + '=' data[key] + '&';
}
var result = str.slice(0, str.length - 1);
console.log(result)

// 方式二 数组的push方式，将对象内每一个成员都推入到一个空数组，然后通过数组的join方法拼接成字符串
var data = {
  usrename: 'xcr',
  userAge: 18
};
var arr = [];
for (var key in data) {
  arr.push(key + '=' + data[key]);
}
var result = arr.join('&');
console.log(result);

// 函数封装  调用这个函数即可实现以对象形式传入参数，不用再书写urlencoded格式的参数了
function dataFormat(data) {
	var arr = [];
  for (var key in data) {
    arr.push(key + '=' + data[key]);
  } 
  return arr.join('&');
}

封装get函数

// data是可选参数 success是可选参数
// 将参数设置为一个对象
function get(options) {
  var url = options.url;
  var data = options.data;
  var success = options.success;
  var xhr = new XMLHttpRequest();
  // 检测是否传入data，如果有再进行格式拼接，如果没有，直接传
  url = data ? url + '?' + dataFormat(data) : url;
  xhr.open('get', url);
  xhr.send();
  xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
      var result;
      if (xhr.getResponsrHeader('Content-Type').indexOf('json') !== -1) {
        result = JSON.parse(xhr.responseText);
      } else {
        result = xhr.responseText;
      }
      // 将响应的数据尝试传递给用户进行操作
      if (typeof success === 'function') {
        success && success(result);
      }
    }
  }
}

function dataFormat(data) {
	var arr = [];
  for (var key in data) {
    arr.push(key + '=' + data[key]);
  } 
  return arr.join('&');
}

get({
   url: 'http://localhost:3005/common/get',
   data: {
     color: 'red',
     width: 200,
     height: 300,
     name: 'xcr'
   },
   success: function(result) {
     console.log(result);
   }
})

封装ajax函数

function ajax(options) {
  var type = options.type || 'get';
  var url = options.url;
  var data = options.data ? dataFormat(options.data) : '';
  var success = options.success;
  var xhr = new XMLHttpRequest();
  xhr.open(type, type === 'get' ? url + '?' : url);
  if (type === 'get') {
    xhr.send();
  } else {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);
  }
  xhr.onreadystatechange = function () {
    if(xhr.readyState === 4) {
      var result;
      if (xhr.getResponseHeader('Content-Type').indexOf('json') !== -1) {
        result = JSON.parse(xhr.responseText);
      } else {
        result = xhr.responseText;
      }
      if (typeof success === 'function') {
        success && success(result);
      } 
    }
  }
}

function dataFormat(data) {
	var arr = [];
  for (var key in data) {
    arr.push(key + '=' + data[key]);
  } 
  return arr.join('&');
}

ajax({
  type: 'post',
  url: 'http://localhost:3005/common/post',
  data: {
    name: 'xcr',
    age: 18,
    gender: '男'
  },
  success: function(result) {
    console.log(result);
  }
});

8. 文件类型

文件类型	accept属性值	类型
*.3gpp	audio/3gpp, video/3gpp	3GPP Audio/Video
*.ac3	audio/ac3	AC3 Audio
*.asf	allpication/vnd.ms-asf	Advanced Streaming Format
*.au	audio/basic	AU Audio
*.css	text/css	Cascading Style Sheets
*.csv	text/csv	Comma Separated Values
*.doc	application/msword	MS Word Document
*.dot	application/msword	MS Word Template
*.dtd	application/xml-dtd	Document Type Definition
*.dwg	image/vnd.dwg	AutoCAD Drawing Database
*.dxf	image/vnd.dxf	AutoCAD Drawing Interchange Format
*.gif	image/gif	Graphic Interchange Format
*.htm	text/html	HyperText Markup Language
*.html	text/html	HyperText Markup Language
*.jp2	image/jp2	JPEG-2000
*.jpe	image/jpeg	JPEG
*.jpeg	image/jpeg	JPEG
*.jpg	image/jpeg	JPEG
*.js	text/javascript, application/javascript	JavaScript
*.json	application/json	JavaScript Object Notation
*.mp2	audio/mpeg, video/mpeg	MPEG Audio/Video Stream, Layer II
*.mp3	audio/mpeg	MPEG Audio Stream, Layer III
*.mp4	audio/mp4, video/mp4	MPEG-4 Audio/Video
*.mpeg	video/mpeg	MPEG Video Stream, Layer II
*.mpg	video/mpeg	MPEG Video Stream, Layer II
*.mpp	application/vnd.ms-project	MS Project Project
*.ogg	application/ogg, audio/ogg	Ogg Vorbis
*.pdf	application/pdf	Portable Document Format
*.png	image/png	Portable Network Graphics
*.pot	application/vnd.ms-powerpoint	MS PowerPoint Template
*.pps	application/vnd.ms-powerpoint	MS PowerPoint Slideshow
*.ppt	application/vnd.ms-powerpoint	MS PowerPoint Presentation
*.rtf	application/rtf, text/rtf	Rich Text Format
*.svf	image/vnd.svf	Simple Vector Format
*.tif	image/tiff	Tagged Image Format File
*.tiff	image/tiff	Tagged Image Format File
*.txt	text/plain	Plain Text
*.wdb	application/vnd.ms-works	MS Works Database
*.wps	application/vnd.ms-works	Works Text Document
*.xhtml	application/xhtml+xml	Extensible HyperText Markup Language
*.xlc	application/vnd.ms-excel	MS Excel Chart
*.xlm	application/vnd.ms-excel	MS Excel Macro
*.xls	application/vnd.ms-excel	MS Excel Spreadsheet
*.xlt	application/vnd.ms-excel	MS Excel Template
*.xlw	application/vnd.ms-excel	MS Excel Workspace
*.xml	text/xml, application/xml	Extensible Markup Language
*.zip	application/zip	Compressed Archive

9. 本地图片预览

文件控件选中图片后，会保存图片信息到它的files属性中，files属性是一个数组，如果只选中一个图片，这张图片就放在files[0]中，如果选中多张图片，则以此后推。
通过window.URL.createObjectURL()创建一个临时路径
将这个临时路径的地址赋值给img标签的src属性即可。

<form action="">
  <input type="file">
</form>
<img src="" alt="">

var fd = new FormData(document.getElementsByTagName('form')[0]);
var ipt = document.querySelector('input');
var img = document.querySelector('img');
ipt.onchange = function () {
  img.src = window.URL.createObjectURL(this.files[0]);
}

itxcr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax相关(原生ajax，jQuery中ajax)，本地图片预览及文件类型

1. get和post请求从服务端获取数据：get请求请求参数在地址栏中以urlencoded形式显示格式：username=xcr&userAge=18通过location.search可获取当前地址栏中 ? 及其后面的请求参数内容可发送 2kb左右的数据只能发送文本形式的数据get请求可以被缓存，将地址保存，这个请求所携带的请求参数都将被保存给服务端发送数据：p...
复制链接

扫一扫