《JQuery实战进阶：“web技能”》课件-第七章 jQuery操作Ajax

JQuery应用开发——jQuery操作Ajax目录7.1Ajax简介7.2配置服务器环境7.3jQuery发出GET请求7.4jQuery发出POST请求7.5$.ajax方法jQuery应用开发——Ajax简介01什么是Ajax请求方式目录CONTENT02Ajax的优势0301什么是AjaxAjax：全称是AsynchronousJavascriptAndXML，即异步的JavaScript和XML。用途：在JavaScript、DOM、服务器配合下，浏览器向服务器发出异步请求。特点：异步回调函数；Ajax不是一门新的编程语言，而是一种Web应用程序技术什么是Ajax2.请求方式传统方式Ajax方式02请求方式Ajax请求相对请求数据量少Ajax请求分散，不会集中爆发请求数据时页面不刷新，用户体验良好3.Ajax的优势03Ajax的优势jQuery应用开发——配置服务器环境01phpstudy安装phpstudy使用目录CONTENT0201phpstudy安装1、phpstudy安装

02phpstudy使用1、phpstudy使用

jQuery应用开发—jQuery发出GET请求01$.get()$.get()方法的基本使用：用途：按照GET方式与服务器通信语法：$.get(url,[data],[function(data,status,xhr)],[dataType]);参数：url-必需，规定加载资源的路径；data-可选，发送至服务器的数据；function(data,status,xhr)-可选，请求完成时执行的函数；data表示从服务器返回的数据；status表示请求的状态值；xhr表示当前请求相关的XMLHttpRequest对象；dataType-可选，预期的服务器响应的数据类型01$.get()2.使用$.get()方法请求数据

$.get('target.html',function(data){$('#box').html(data);//通过data参数得到取得的数据},'html');传入路径作为第一个参数，即向服务器请求数据，并在回调函数中获取数据。01$.get()varuserData={username:'小明',password:123456};$.get('register.php',userData,function(data){$('#box').html(data);},'html');3.使用$.get()方法发送数据：需要使用第二个参数来传递数据。02总结$.get()方法的基本使用01$.get()方法请求数据02$.get()方法发送数据03jQuery应用开发—jQuery发出POST请求01$.post()$.post()方法的基本使用：用途：按照POST方式与服务器通信语法：$.post(url,[data],[function(data,status,xhr)],[dataType]);参数：url-必需，规定加载资源的路径；data-可选，发送至服务器的数据；function(data,status,xhr)-可选，请求完成时执行的函数；dataType-可选，预期的服务器响应的数据类型；01$.post()varuserData={username:'小明',password:123456};

$.post('register.php',userData,function(data){$('#box').html(data);},'html');2.使用$.post()方法发送数据：需要使用第二参数来传递数据。01$.post()3.$.get()方法和$.post()方法的区别发送数据的方式不同：GET方式作为URL参数发送至服务器，POST方式作为请求实体发送至服务器。发送数据的内容大小不同：

GET方式在2KB到8KB之间，POST方式理论上内容大小没有限制。数据的安全性：GET方式将数据作为查询字符串加在了请求地址后面，较容易被他人读取。POST方式将数据作为请求实体发送，所以更为安全。02总结$.post()方法的基本使用01$.post()方法请求数据02$.get()方法和$.post()方法的区别03jQuery应用开发—$.ajax()方法01$.ajax()解决跨域问题目录CONTENT02总结0301$.ajax()1.$.ajax()的基本使用$.ajax()相关概念：用途：jQuery中所有Ajax方法都是基于该方法实现，是jQuery中最底层Ajax方法，可用于实现任何形式的Ajax请求。语法：$.ajax(options)或$.ajax(url,[options])；参数：url-必需，规定加载资源的路径；options-对象，该对象将Ajax请求需要的设置包含在属性中；01$.ajax()1.$.ajax()的基本使用参数描述url请求地址，默认是当前页面data发送至服务器的数据xhr用于创建XMLHttpRequest对象的函数callback请求完成时执行的函数dataType预期的服务器响应的数据类型$.ajax()方法部分参数：01$.ajax()1.$.ajax()的基本使用

jQuery.each(["get","post"],function(i,method){jQuery[method]=function(url,data,callback,type){if(jQuery.isFunction(data)){type=type||callback;callback=data;data=undefined;}returnjQuery.ajax({url:url,type:method,dataType:type,data:data,success:callback});};});封装$.get()、$.post()方法使用$.ajax()方法实现功能使用$.ajax()方法封装$.get()、$.post()方法01$.ajax()

//利用$.ajax()方法实现$.ajax({url:'target.html',success:function(data){$('#box').html(data);},dataType:'html'});1.$.ajax()的基本使用$.ajax()方法请求HTML文件

//利用$.ajax()方法实现$.get({

'target.html',

function(data){$('#box').html(data);},

'html'});$.get()方法请求HTML文件02

解决跨域问题跨域请求相关概念：跨域：指的是浏览器不能执行其他网站的脚本。例子：比如在网站中使用Ajax请求其他网站的天气、快递或者其他数据接口原因：浏览器的同源策略造成的同域名、同端口、同协议02

解决跨域问题服务端:header(“Access-Control-Allow-Origin:*）；*（星号）：表示所有的域都可以接受。03总结$.ajax()01解决跨域问题02PPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beijing/PPT图表下载：/tubiao/优秀PPT下载：/xiazai/PPT