node.js ajax语法

ajax必须运行在有服务器开启的网页当中

AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。

ajax的实现步骤：
ajax在没有经过特殊的设置时，只能访问同源的网站

//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.告诉ajax请求地址以及请求方式
xhr.open('get','http://www.example.com');
//3.发送请求
xhr.send();
//4.获取服务器端给与客户端的响应数据
xhr.onload = function(){console.log(xhr.responseText);//xhr.responseText返回值是String
}

ajax属于JavaScript代码，要写在script标签内
XMLHttpRequest 对象会代替浏览器给服务器发送信息

xhr.sned()方法不能直接接受服务器返回的结果，必须使用noload事件

使用ajax发送请求参数时，请求参数需要手动拼接

get请求是不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的，超大型文本数据适合post请求提交到服务器

ajax状态码：表示ajax请求的过程状态，是由ajax对象返回的
http状态码：表示请求的处理结果，是由服务器端返回的

ajax封装：
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;}//配置ajax对象xhr.open(defaults.type,defaults.url);//如果请求方式为post if(defaults.type == 'post'){//用户希望的向服务器端传递的请求参数的类型var contentType = defaults.header['Content-Type'];//设置请求参数格式的类型xhr.setRequestHeader('Content-Type',contentType);//判断ajax函数传入对象中希望的请求参数的类型//如果是json类型if(contentType == 'application/json'){//向服务器端传递json数据格式的参数xhr.send(JSON.stringify(defaults.data));}else{//向服务器端传递普通类型的请求参数xhr.send(params);}}else{//发送请求xhr.send();}//发送请求xhr.send();//监听xhr对象下面的onload事件//当xhr对象接收完响应数据后触发xhr.onload = function(){//获取响应头中的数据var contentType = xhr.getResponseHeader('Content-Type');//服务器端返回的数据var responseText = xhr.responseText;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:'get',//请求地址url:'http://localhost:3000/first',data:{name:'zhangsan',age:20},header:{'Content-Type':'application/json'},success:function(data){console.log('这里是success函数'+data);},error:function(data,xhr){console.log('这里是error函数')}})

客户端的art-template模板引擎

template第一个参数是模板id，第二个参数是一个对象，对象中储存要拼接的数据

FormData对象的作用：
1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
2.异步上传二进制文件

1.准备HTML表单<form id="form"><input type="text" name='username'><input type="password" name='password'><input type="button"></form>2.将HTML表单转化为formData对象var form = document.getElementById('form');var formData = new FormData(form);3.对表单进行配置，提交表单对象xhr=new XMLHttpRequest();xhr.open('post','http://localhost:3000/formData');xhr.send(formData);4.监听xhr对象下的onload对象xhr.onload = function(){//对象http状态码进行判断if(xhr.status == 200){console.log(xhr.renponseText);}}

FormData对象的实例方法：
1.获取表单对象中属性的值
formData.get(‘key’);
2.设置表单对象中属性的值
formData.set(‘key’,‘value’);

ajax请求限制：
ajax只能向自己的服务器发送请求，两个不同源的网站之间不能互相发送信息

1同源（是不是同一个服务器）：如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

在script标签中的src属性中输入请求地址，就会执行服务器端的代码，由于服务器端返回的代码是个函数并且被客户端接收，所以客户端就会执行相同函数名称的函数·

点击按钮动态发送请求，并且在请求完成之后删除script标签

优化代码：

把函数的名称变为形式参数传递到服务器端，服务器端接收参数之后再返回一样的参数

代码的封装：

function jsonp(options){//动态创建script标签var script = document.createElement('script');//拼接字符串的变量var params = '';for(var attr in options.data){params += '&' +attr + '=' +options.data[attr];}//随机生成函数的名字var fnName = 'myJsonp'+Math.random().toString().replace('.','');//把options.success变成为一个全局函数,.后面不能跟变量window[fnName] = options.success;//为script标签添加scr属性script.src = options.url+'?callback='+fnName;//将script标签追加到页面中document.body.appendChild(script);//为script标签添加onload事件script.onload = function(){document.body.removeChild(script);}
}
jsonp({//请求地址url:'http://localhost:3001/better',data{name:'lisi',age:30},success:function(data){console.log(data);}
})
//把jsonp放在点击事件当中即可

jsonp是express框架下给的方法，接收客户端传递过来的请求参数，将数据转化为字符串，再与请求地址拼接好，返回客户端

CORS：跨域共享资源，它允许浏览器向浏览器向跨域服务器发送ajax请求，克服了ajax只能同源使用的限制

客户端：
<button id='btn'>点我发送请求</button>
//获取按钮
var btn = document.getElementById('btn');
btn.onclick = function(){ajax({type:'get',url:'http://localhost:3001/cross',success:function(data){console.log(data);}})
}
服务器端：
app.use((req,res)=>{//1.允许哪些客户端访问我//*代表允许所有的客户端访问我res.header('Access-Control-Allow-Origin','*');//2.允许客户端使用哪些请求访问我res.header('Access-Control-Allow-Methods','get,post');//3.允许客户端发送请求时携带cookie信息res.header('Access-Control-Allow-Credentials',true);next();
})

第三方模块request:向其他的服务器端请求数据
var request = require('request');
request(url,function(error,response,body){//url:请求地址  error：错误对象 response：服务器端的响应信息 body：响应的主体内容})

在使用ajax技术发送请求跨域请求时，默认情况下不会在请求中携带cookie信息
解决办法：withCredentials:指定在涉及到跨域请求时，是否携带cookie信息，默认值为false
Access-Control-Allow-Credentials:true 允许客户端发送请求时携带cookie信息

当发送跨域请求时，携带cookie信息
xhr.withCredentials = true;

jQuery中ajax方法：

$.ajax()方法：

$.ajax({type:'get',url:'http://www.example.com',//data中也可以直接传递字符串参数，用&符号进行分割多个参数值data:{ name:'zhangsan',age:'20' },//指定参数传递的类型来匹配服务器的要求 application/json可以设置为json字符串类型的参数值 //application/x-www-form-urlencoded为默认值，就是&分割参数的类型//在contentType中设置什么样的参数类型，data中就要传递什么样的参数类型//JSON.stringify可以把json对象转化为json字符串contentType:'application/x-www-form-urlencoded',//在请求发送之前执行的函数beforeSend:function(){//return false可以阻止发送请求return false},//请求成功之后执行的函数，response为服务器端返回的信息，方法内部会自动将json字符串转换为json对象success:function (response){},//请求错误的函数error:function(xhr){}
});

serialize方法:将表单中的数据自带拼接为字符串类型的参数，参数名=参数值，用&符号分割参数的类型

<form id="form"><input type="text" name="username"><input type="password" name="password"><input type="submit" value="提交">
</form>
<script src='/js/jquery.mim.js'></script>
<script type="text/javascript">$('#form').on('submit',function(){//将表单内容拼接成字符串类型的参数var params = $('#form').serialize();serializeObject($(this));return false;})//将表单中用户输入的内容转换为对象类型function serializeObject(obj){//定义一个空变量来储存数组的值var result={}; //将表单中的内容以数组的方式储存，每个元素都是一个表单对象//[{name:"username",value:"zhangsan"},{name:"password",value:"123456"}]var params = obj.serializeArray();//对数组进行循环遍历，将数组转换为对象类型,index为下标，value为每一个对象$.each(params,function(index,value){result[value.name]=value.value;})return result;}
</script>

发送jsonp请求：

客户端：
$.ajax({url:'http://localhost:3000/jsonp,//指定当前发送jsonp请求dataType:'jsonp',//修改callback参数名称jsonp:'cb',//指定函数名称,如果设置该属性，必须自己在全局作用域下准备该函数，不执行success函数//jsonCallback:'fn',success:function(response){console.log(response);}
})
服务器端：
app.get('/jsonp',(req,res)=>{const cb = req.query.cb;const data = cb+"({name:'zhaoliu'})";res.send(data);
})

$.get方法用于发送get请求，$.post方法用于发送post请求
$.get(url,{},function(response){})
$.post(url,{},function(response){})

jQuery中ajax全局事件
只要页面中有ajax请求被发送，对应的全局事件就会被触发

.ajaxStart() //当请求开始发送时触发
.ajaxComplete() //当请求完成时触发

//当页面中有ajax请求发送时触发
$(document).on('ajaxStart',function(){console.log('start');
})
//当页面中有ajax请求完成时触发
$(document).on('ajaxComplete',function(){console.log('complete');
})

node.js ajax语法相关推荐

Node.js 报语法错误 SyntaxError: Unexpected identifier
原文链接:https://blog.csdn.net/sleepwalker_1992/article/details/81029380 刚开始学习node.js,安装完以后,写了一个简单的js代码, ...
node.js ajax success,前端如何通过ajax和node.js交互？
首先我的文件结构: web -public --login.html(登陆页面属于静态页面) -veiws --index.jade -routes --index.js -app.js 前端代码 $ ...
【实习日记】第五天剖析源码＋学习Node.js Typescript基本语法
国庆假期结束了,其实在这里实习对我而言还算是比较愉快的,虽然完成任务过程中出现的问题层出不穷,但也被克服问题的成就感包裹着,感觉每天在办公室就像在上自习一样.加油啦小荷! 自从把example运行成功 ...
54 Node.js快速入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.Node开发概述 1.1 为什么要学习服务器端开发基础能够与后端程序员更加紧密的配合 ...
js 转json_2020年了为啥还要学 Node.js
前言前些日子刷知乎看到个 2019 年初的问题 2019年nodejs凉了吗?凉到什么程度了?才看到问题的时候吃了一惊,是不是我在的公司大量使用 Node.js 让我有了幸存者偏差,前端社区已经沧海 ...
一个后端开发人员的node.js学习笔记（一）安装与第一个服务器
2019独角兽企业重金招聘Python工程师标准>>> 1.Node.js的下载和安装 Node.js安装包及源码下载地址为:https://nodejs.org/en/downlo ...
[转] Node.js的线程和进程
[From] http://www.admin10000.com/document/4196.html 前言很多Node.js初学者都会有这样的疑惑,Node.js到底是单线程的还是多线程的?通过本 ...
js和python哪个好_Python与Node.JS：哪一个比较适合您的项目？
在进行新项目时选择正确的编程语言可能是程序员经常做出的比较艰巨的决定之一. 这个挑战背后的原因是,每个新项目都会遇到一个独特的问题,并且在编程世界中,没有任何行业的大师. 不同的编程语言都有其长处和短 ...
Node.js: NPM 使用介绍
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...

node.js ajax语法

node.js ajax语法相关推荐

最新文章

热门文章