ajax简单小结(1) |
您所在的位置：网站首页 › Ajax好处 › ajax简单小结(1) |
|
服务器与客户端 服务器( server )---把自己的页面让其他人能够访问 作用 :服务器 = 硬件配置高的电脑 + 安装特殊软件 服务器与个人电脑 : 分类 :web服务器 : 安装了能提供web服务的软件, 如iis , nginx , apache等 客户端 ( client )---连接到服务器 , 享受服务的设备 , 就是客户端 访问web服务器 基本流程 : 1, 用户在浏览器( 客户端 ) 地址栏输入要访问的网站地址 ( URL ) 2, 浏览器向服务器发送请求 ( request ) , 告知服务器要获取的内容 3, 服务端收到浏览器发送的请求, 并把处理的结果返回给浏览器 ( response ) 4, 浏览器将服务端返回的结果显示到界面上 ajax经典使用场景 在不更新页面的情况下 , 浏览器要从web服务器获取数据 , 此时就可以使用ajax技术 ajax好处 : 1, 局部更新 , 提升用户体验, 提升性能 2, 分离开发 , 提高开发效率 , 在项目实际开发中, ajax是一个必不可少的技术 , 是前后端分离开发的基础 ---2.1. 后端同学提供接口。这个接口我们可以理解是一个`函数`:它的内部进行业务处理，数据库访问等等操作，并返回结果。如何去实现这函数的功能就是后端同学的任务了。 ----2.2. 前端同学调用接口获取数据（有其特定的格式），然后再把数据转化成的图文并茂的网页。 AJAX , 全称是 : Asynchronous JavaScript And Xml ( async : 表示异步 , sync : 表示同步) 异步的JavaScript 和XML 是一种创建交互式网页应用的网页开发技术。并不是一种新技术，而是一种解决方案，早在在异步表示不阻塞 : 浏览器在请求数据时 ,并不会阻塞用户后续的操作 , 理解为浏览器派了一个小弟去服务器拿数据了XML 表示一种数据格式 , 最初设计AJAX时 , 从服务器返回的数据是XML格式 , 后面慢慢被JSON数据格式取代了- 更具体一点，`浏览器`通过内置对象 `XMLHttpRequest` 向服务器发起请求，并可以接收服务器返回给浏览器的数据，这一过程或实现这一过程的技术就是我们所说的 Ajax。ajax 是什么 ,1, 是解决方案 , 不是新技术 2, async ( 异步 ) , JavaScript and xml ( 数据格式 ) 3, 核心是 XML HttpRequest 对象 jQuery 体验ajax1, 发 ajax 请求之前 , 要确保借口是正确的 // 2 jQuery中封装好了现成ajax方法 $ . ajax ( )-------------------------------------------------------- $.ajax(url:接口的地址，{ type:"get", // get,post。这是由后端接口固定，前端只能照写。 success:function(result){ //当请求回来时，自动调用它。 // result就是从服务器回来的值。 } })------------------------------------------- 回调函数 : 函数 --自动的在某个时刻被调用 ----一般不需要命名---- 格式上看 , 他就是一个参数 [1, 2, 3].forEach(function f1(ele) { console.log(ele + 1); }); // forEach是一个函数，而function(){} 就是它的参数 jQuery的AJAX功能基本流程 : 1, 准备工作 : 确保服务器端是已经就绪的。直接在地址栏中使用接口，测试接口 2, 新建页面 , 引入jQuery. 3, 参考给定的$ . ajax 格式, 发送请求 ajax ( ) 的基本格式: $ . ajax ( url , { type : ' get ' 或 ' post ' data : { id : 1 } success : function ( result ) { console.log( result ) } } ) //---url : 表示请求的地址 , 可以省略域名 //---type : 表示请求的类型 , 常见取值 get , post 如果不写, 默认为 ' get ' // ---data : 表示发送请求时附加的参数 , 如果没有参数, 可以省略 //----success : 他是一个回调函数 , 当请求成功之后会自动调用这个函数, 他的第一个参数是服务器端返回的数据 get 和 post的区别get : 不会修改服务器资源 get中带的参数 , 通过附加在url后面传递( query string Parameters ) ---------------- post : 提交数据 , 可能会修改 post中带的参数看不见 , 更安全 ( Form Data ) --------------- 后端决定是用什么方式 一个接口是什么类型, 由后端决定 模板字符串的基本使用 格式 : ` ${ 变量 }` ` $ { 表达式 }` 注意 : ---用反引号包起来 ----$ { } 是固定写法 . 变量写在里面 ----内部支持换行 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |