JavaScript(Ajax) |
您所在的位置：网站首页 › ajax是什么文件 › JavaScript(Ajax) |
|
Ajax：async javascript and xml - 前端和后端进行交互的一种技术
ajax：异步的js技术，作用是前端跟后端进行传递数据 异步的js和xml - 在很久以前，数据都是以xml形式表现的 - 异步的js操作数据 现在的数据，大多以字符串形式表现，因为所有语言中的字符串都是一样的 前端攻城狮的工作：根据数据渲染页面 1.获取数据 - 服务器中 2.根据数据渲染 Ajax - 语法 四步骤 1.创建对象 - 创建电话 var xhr = new XMLHttpRequest() 2.设置请求出参数 - 调用open方法 --- 找号码，选择卡1 还是卡2参数一：请求方式 参数二：请求地址 参数三：布尔值 - 是否异步 - 默认true xhr.open('get', 'http://localhost:8888/test/first', true) 3.监听请求方式 - 将手机放到耳旁等待听声音 xhr.onreadystatechange = function(){绑定事件的语法 - 什么时候触发？当ajax请求的状态发生了改变的时候就会触发 ajax的状态 - ajax对象.readyStateconsole.log(xhr.readyState); // 0 1 2 3 4 0表示未初始化 - 没创建对象 1表示对象创建了，但是还没有发送 - send 2已经send了，对方已经收到消息了，但是还没有彻底看懂我们什么意思，还有很多事情需要准备 3对方已经在给我们响应信息了，但是信息不完整 4数据已经完整了 - 可以接收到完整的数据了 监听这次请求的状态是否到最后 - 4 if(xhr.readyState === 4){ //判断这次请求是否成功 - 是否是2开头的 //请求状态 -http状态： /* 1开头：正在进行中 2开头：各种成功 3开头：重定向 - 缓存 4开头: 客户端错误 5开头: 服务端错误 */ if(xhr.status >= 200 && xhr.status < 300){ //表示这次请求是成功，已经完成了 //接收对方的数据 var res = xhr.responseText console.log(res) } }如果在面试中，问你：ajax的工作原理 - ajax的4个步骤 在2-4之间顺序是可以互换的 4.发送 - 调用对象的send方法 - 点击拨号 xhr.send() AJAX练习 var xhr = new XHLHttpRequest //当构造函数不需要传参数的时候，new的时候就可以省略小括号 xhr.open('get','http://'请求路径'') //参数3课选项，默认true - 异步 xhr.send() xhr.onreadystatechange = function(){ //判断是否结束 if(xhr.readyState === 4) { //判断请求是否成功 if(parseInt(xhr.status/100) == 2) { //接收数据 var res = xhr.responseText console.log(res) // 像对象的字符串+像数组的字符串 - json字符串 // json字符串转换成json对象 - JSON.parse(json字符串) - 返回json对象 res = JSON.parse(res) console.log(res); console.log(res.age); // json对象转成json字符串 - JSON.stringify(json对象) - 返回json字符串 } } }请求方式有很多，最常见的就2个，get和post get请求通常的数据在地址栏，不如post安全 get请求的数据在地址栏，数据大小是受到限制的 - 4kb。post是没有限制的 1T = 1024G 1G = 1024M 1M = 1024kb 1kb = 1024字节 1个汉字，如果是utf-8 = 3个字节 1个汉字，如果是gbk = 2个字节 get 请求：1.直接在浏览器中输入地址敲回车 2.在页面中点击了a标签转跳到另一个页面，显示另一个页面中的内容，显示内容也是要发送请求的 - get 3.引人文件的请求也是get请求，link引人css、script引人js，img引人图片、iframe引人html页面 4.form表单默认能提交，默认提交方法也是get 5通过ajax发送get请求 get请求如何携带参数？get请求的参数会放在地址栏中，在？后面的键值对都属于get请求的参数 var xhr = new XMLHttpRequest; xhr.open('get','http://localhost:8888/test/third?name=李四&age=888') xhr.send() xhr.onreadytatechange = function(){ if(xhr.readyState === 4) { if(xhr.status>=200 && xhr.status= 200 && xhr.status < 300) { var res = xhr.responseText res = JSON.parse(res) console.log(res) } } }post请求如果不需要带参数，就可以不设置头信息，不给send中加参数 AJAX请求文件 要请求文件必须使用get请求去做ajax不光是可以请求后端提供的接口，还可以请求一些文件，获取到文件中的数据 被请求的文件，他的文件类型是没有限制的 ajax如果要请求文件：被请求的文件必须要在web服务器中 web服务器的搭建：利用vscode的插件：live server preview on web server var xhr = new XMLHttpRequest //xhr.open('get','文件路径.json') //xhr.open('get','文件路径.css') //xhr.open('get','文件路径.js') xhr.open('get','文件路径.xml') xhr.send() xhr.onreadystatechange = function(){ if(xhr.readySate === 4) { if(xhr.status >= 200 && xhr.status < 300){ // var res = xhr.responseText; // res = JSON.parse(res) // eval函数，可以将一个字符串js代码当做js代码解析执行 // console.log(res); // eval(res) // 当将一段代码当做js代码执行，这段不是js代码，会报错的 // 如果请求的是xml文件，就可以使用独立的另外一种接收数据的方法来接收数据 var res = xhr.responseXML // console.log(res); // 将res当做html标签节点来操作 var class2201 = res.children[0] // console.log(class2201); var peoples = class2201.querySelectorAll('people') // console.log(peoples); for(var i=0; i |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |