ajax原生写法,ajaxjsonp
终极管理员 知识笔记 1987阅读
在JavaWeb中路径分为相对路径和绝对路径两种
相对路径
./ 表示当前目录(可省略)
../ 表示当前文件所在目录的上一级目录
绝对路径
2.2 在JavaWeb中/的不同意义
/ 斜杠 如果被浏览器解析得到的地址是
<a href/>斜杠</a>
<form action/>
/ 斜杠 如果被服务器解析得到的地址是
<url-pattern>/Servlet1</url-pattern>
request.getRequestDispatcher(“/”)
特殊情况response.sendRedirect(“”)把斜杆发给浏览器去解析得到 2.ajax请求 2.1浏览器与服务器交互请求方式 浏览器和服务器进行数据交互的基本流程为 1. 浏览器发起http请求 2. 服务器收到请求对请求进行解析 3. 服务器根据请求解析结果调用对应的资源处理请求 4. 服务器将处理结果响应给浏览器 5. 浏览器收到响应结果对结果数据进行解析 6. 浏览器将解析后的数据展示在页面 方式 特点 1. 一种新的让浏览器发起http请求的技术 2. 使用ajax发起的请求响应结果不会自动的覆盖原有内容而是可以在原有页面内容上继续显示 3. Ajax是一门基于JavaScript的技术由浏览器解析运行所以是一种前端客户端技术 4. 简单易用 同步请求 发送请求后一直等待服务端的响应获取到服务端响应再执行其他的逻辑代码。 1. 在浏览器地址栏输入url发起请求 2. 使用超链接发起请求 3. 使用form表单发起请求 4. 在js代码中使用window.location.href发起请求 5. ajax发起同步请求 ajax与其他方式发送同步请求的区别: ajax可以局部刷新, 其他的请求会刷新整张页面 异步请求 发送请求后不需要等待服务端的响应继续按照顺序执行其他逻辑代码监听到响应自动调用指定的方法。 1. Ajax的就绪状态(readystate) 在ajax对象中提供了一个监听机制 “onreadystatechange”用来监听ajax的属性readyState的改变情况一旦该值改变就会触发监听中的函数的执行。 readyState的值表示的含义: 0请求没有开启(在调用open()之前) 1请求已经建立但是还没有发出(调用send()之前) 2请求已经发出服务器正在处理 3请求已经处理响应中有数据可用但是服务器还没有完全响应完 4响应已经完成浏览器已经接收到全部的响应内容 对我们来说我们应该关注的是readyState是4时候的情况。 2. Ajax请求的响应状态 通过对ajax的就绪状态做判断我们在就绪状态是4的情况下编写我们的对响应结果的处理逻辑代码但是不是任何响应结果我们都要处理因为服务器的响应也有状态码比如200、404、500等等。 所有我们在ajax中编写响应结果处理时也必须考虑响应状态码 在没有使用json之前通过对对象的toString方法传递数据 GSON是google转json字符串的工具 fastJson 是阿里转json字符串的工具 json数据是指js对象对应的字符串数据 问题目前我们编写的Ajax代码访问服务器及对响应结果的处理流程如下 1. 在页面编写Ajax相关代码 1. 创建xhr对象 2. 开启连接 3. 发起请求 4. 监听准备状态的变化 2. 用户通过浏览器访问页面 3. 用户在浏览器中触发事件发起ajax请求 4. 服务器收到请求进行处理处理完后按照json格式的字符串响应给浏览器 5. 浏览器收到响应数据后触发回调函数的执行; jQuery是js的一个库其实jQuery中已经对Ajax完成了封装而且形式多样 第一种 $.ajax({ type:“请求方式(默认get方法)”, 可不写 url:“请求地址” 请求资源路径 data:{请求参数--js对象}无参数可不写 dataType:服务器返回的数据类型 json 返回data为js对象格式 success:fundction(data){ //成功且完整响应自动调用的函数 data为接口响应的数据 }, error: function(){ //出现错误自动调用的函数 当服务端500或客户端404出现错误执行该函数 } }) dataType用来指定服务器返回来的数据类型可选值有如下 * xml表示服务器返回的是xml内容 * html表示服务器返回的是html文本内容 * script表示服务器返回的是script文本内容 * json表示服务器返回的是json内容重点 * jsonp表示使用jsonp形式调用函数早期我们用它来解决跨域问题 * text表示服务器返回的是纯文本字符串 第二种 $.get(“请求地址”“请求参数js对象”成功回调函数, 返回的数据类型) $.post(“请求地址”“请求参数js对象”成功回调函数, 返回的数据类型) 省略请求方式、出现错误的回调函数 回调函数主要是用来处理服务器对我们的响应结果。 返回的数据类型这个参数用来设置服务器返回来的数据类型可以是xml, html, script, json, text。 第三种 $.getJSON(请求地址, 请求参数, 回调函数) 这种方式要求服务器返回的数据类型得是json格式的。 第四种 $.getScript(请求地址, 回调函数) 这种方式是发送ajax请求获取一个js文件。
3.json(JavaSrcipt Object Nation)Js对象标记法 // 页面加载完成后执行 或者 $(function(){}) 或 $(document).ready(function (){})window.onload function () { /* * ajax 异步请求 获取花卉信息 * 异步程序不需要等待获取结果线程直线完成后通知程序程序获取 例如 AIO 异步非阻塞IO * 同步程序需要等待线程获取结果后程序才能继续执行 例如BIO 同步阻塞IO NIO 同步非阻塞IO * 1. 创建xhr XMLHttpRequest对象 * 2. 开启请求连接 * 参数1请求方式 * 参数2请求资源路径 * 参数3asyn 异步默认true设置false为同步 * 3. 发送请求 * 4. 监听准备状态码的变化 * 0. 已创建xhr对象未建立连接 * 1. 建立连接未发送请求 * 2. 发送请求服务端接收请求并处理 * 3. 服务端向客户端响应不是完整的响应通常用于获取请求头中的信息 * 4. 服务端完成向客户端的响应 * 状态码200 接口请求响应成功 * */ var xhr new XMLHttpRequest(); // 创建ajax请求对象 xhr.open(get, ../findAllFlowers); // 开启连接 xhr.send(); // 发送请求 // 监听准备状态的改变 xhr.onreadystatechange function (ev) { if (xhr.readyState 4 && xhr.status) { var responseText xhr.responseText; console.log(responseText); if (responseText ! fail) { // var result convertStrToJs(responseText); var result JSON.parse(responseText); for(var i in result){ var html <tr classtrresult[i].id> <td>result[i].id</td> <td>result[i].name</td> <td>result[i].city</td> <td>result[i].des</td> <td> <a hrefjavascript:void(0) onclickdeleteFlower(result[i].id)>删除</a> <a hrefjavascript:void(0)>修改</a> </td> </tr>; $(#tb).append(html); // 追加元素 } } } }}