post请求方式以及传参格式设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> function ajax (options) { // 存储的是默认值 var defaults = { type: 'get', url: '', data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function () {}, error: function () {} }; // 使用options对象中的属性覆盖defaults对象中的属性 Object.assign(defaults, options); // 创建ajax对象 var xhr = new XMLHttpRequest(); // 拼接请求参数的变量 var params = ''; // 循环用户传递进来的对象格式参数 for (var attr in defaults.data) { // 将参数转换为字符串格式 params += attr + '=' + defaults.data[attr] + '&'; } // 将参数最后面的&截取掉 // 将截取的结果重新赋值给params变量 params = params.substr(0, params.length - 1); // 判断请求方式 if (defaults.type == 'get') { defaults.url = defaults.url + '?' + params; } /* { name: 'zhangsan', age: 20 } name=zhangsan&age=20 */ // 配置ajax对象 xhr.open(defaults.type, defaults.url); // 如果请求方式为post if (defaults.type == 'post') { // 用户希望的向服务器端传递的请求参数的类型 var contentType = defaults.header['Content-Type'] // 设置请求参数格式的类型 xhr.setRequestHeader('Content-Type', contentType); // 判断用户希望的请求参数格式的类型 // 如果类型为json if (contentType == 'application/json') { // 向服务器端传递json数据格式的参数 xhr.send(JSON.stringify(defaults.data)) }else { // 向服务器端传递普通类型的请求参数 xhr.send(params); } }else { // 发送请求 xhr.send(); } // 监听xhr对象下面的onload事件 // 当xhr对象接收完响应数据后触发 xhr.onload = function () { // xhr.getResponseHeader() // 获取响应头中的数据 var contentType = xhr.getResponseHeader('Content-Type'); // 服务器端返回的数据 var responseText = xhr.responseText; // 如果响应类型中包含applicaition/json if (contentType.includes('application/json')) { // 将json字符串转换为json对象 responseText = JSON.parse(responseText) } // 当http状态码等于200的时候 if (xhr.status == 200) { // 请求成功 调用处理成功情况的函数 defaults.success(responseText, xhr); }else { // 请求失败 调用处理失败情况的函数 defaults.error(responseText, xhr); } } } ajax({ type: 'post', // 请求地址 url: 'http://localhost:3000/responseData', success: function (data) { console.log('这里是success函数'); console.log(data) } }) /* 请求参数要考虑的问题 1.请求参数位置的问题 将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置 get 放在请求地址的后面 post 放在send方法中 2.请求参数格式的问题 application/x-www-form-urlencoded 参数名称=参数值&参数名称=参数值 name=zhangsan&age=20 application/json {name: 'zhangsan', age: 20} 1.传递对象数据类型对于函数的调用者更加友好 2.在函数内部对象数据类型转换为字符串数据类型更加方便 */ </script> </body> </html>
jsonp 使用方法 非同源网站使用
<body> <button id="btn1">点我发送请求</button> <button id="btn2">点我发送请求</button> <script type="text/javascript"> // 获取按钮 var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); // 为按钮添加点击事件 btn1.onclick = function () { jsonp({ // 请求地址 url: 'http://localhost:3001/better', data: { name: 'lisi', age: 30 }, success: function (data) { console.log(123) console.log(data) } }) } btn2.onclick = function () { jsonp({ // 请求地址 url: 'http://localhost:3001/better', success: function (data) { console.log(456789) console.log(data) } }) } function jsonp (options) { // 动态创建script标签 var script = document.createElement('script'); // 拼接字符串的变量 var params = ''; for (var attr in options.data) { params += '&' + attr + '=' + options.data[attr]; } // myJsonp0124741 var fnName = 'myJsonp' + Math.random().toString().replace('.', ''); // 它已经不是一个全局函数了 // 我们要想办法将它变成全局函数 window[fnName] = options.success; // 为script标签添加src属性 script.src = options.url + '?callback=' + fnName + params; // 将script标签追加到页面中 document.body.appendChild(script); // 为script标签添加onload事件 script.onload = function () { document.body.removeChild(script); } } </script> </body> //服务器端写法 node app.get('/better', (req, res) => { // 接收客户端传递过来的函数的名称 //const fnName = req.query.callback; // 将函数名称对应的函数调用代码返回给客户端 //const data = JSON.stringify({name: "张三"}); //const result = fnName + '('+ data +')'; // setTimeout(() => { // res.send(result); // }, 1000) res.jsonp({name: 'lisi', age: 20}); });利用jsonp获取非同源数据库的信息
// 向服务器端获取天气信息 jsonp({ url: 'https://wis.qq.com/weather/common', data: { source: 'pc', weather_type: 'forecast_1h', // weather_type: 'forecast_1h|forecast_24h', province: '黑龙江省', city: '哈尔滨市' }, success: function (data) { var html = template('tpl', {info: data.data.forecast_1h}); box.innerHTML = html; } })ajax跨域请求, 并且允许携带cookie
jQuery ajax
