jQuery和Ajax实战教程（第2版）课件 第10章-Ajax 技术详解

第10章AjaxAsynchronousJavaScriptAndXML异步JavaScript与XML技术详解WebDevelopmentClient-ServerCommunication章节内容学习路线本章将系统讲解Ajax技术，从基础概念到实际应用，从jQuery简化实现到原生JavaScript底层机制，最后解决跨域问题。核心要点•异步通信原理•jQueryAjax方法•原生XHR对象•跨域解决方案1什么是Ajax异步JavaScript与XML的核心概念与实际应用2jQuery实现Ajax$.get()$.post()$.ajax()3原生JavaScript实现AjaxXMLHttpRequest对象的底层工作机制4跨域问题JSONPCORS服务器代理5本章作业实践练习与综合应用Chapter10·AjaxTechnology10.1什么是Ajax核心概念Ajax=AsynchronousJavaScriptAndXML异步JavaScript与XML，基于JavaScript实现网页与服务器之间数据交换的技术核心特点网页在不刷新的情况下与服务器交换数据实现页面的局部更新，用户体验流畅异步执行，用户无感知的数据传输实际案例

网易邮箱注册：填写邮箱名后，自动检测是否被占用，无需刷新页面即可显示提示信息Ajax通信流程Chapter10·AjaxTechnology10.2.1jQuery的$.get()方法语法结构$.get(url,callback)1URL参数请求的服务器地址2回调函数处理服务器返回的数据应用场景从服务器获取数据列表查询数据库记录获取JSON格式数据代码示例重要提示Ajax是异步操作，写在$.get()后面的语句不会等待请求结束才执行，必须在回调函数中处理响应数据Chapter10·AjaxTechnology$("button").click(function(){//发出Ajax请求接口$.get("/api-list.php",function(data){//在h1中显示data值$("h1").html(JSON.stringify(data));});});10.2.2jQuery的$.post()方法语法结构$.post(url,data,callback)1URL参数数据提交的目标地址2数据对象要发送到服务器的数据3回调函数处理服务器响应结果应用场景表单数据提交新增数据记录用户注册/登录代码示例重要提示表单提交按钮的type应设置为button而非submit，避免使用默认表单提交方式Chapter10·AjaxTechnology$("#btn").click(function(){$.post("/api-registration.php",{"name":$("input[name=name]").val(),"age":$("input[name=age]").val(),"sex":$("input[name=sex]").val()},function(data){if(data.result==1){alert("提交成功");}else{alert("提交失败");}});});10.2.3jQuery的$.ajax()方法语法结构$.ajax({url:"请求地址",type:"请求方式",data:{发送数据},success:function(result){},error:function(xhr,status,error){}})支持的HTTP方法GETPOSTDELETEPUTPATCH...代码示例核心优势最灵活的Ajax方法，支持所有HTTP请求类型，可完整配置请求参数和错误处理Chapter10·AjaxTechnology$.ajax({url:"api-delete.php?id="+id,type:"DELETE",success:function(data){if(data.result==1){alert("删除成功");$(that).parents("tr").remove();}},error:function(xhr,status,error){console.error(error);}});10.3原生JavaScript实现Ajax核心对象XMLHttpRequest实现Ajax请求的核心对象，提供客户端与服务器之间传输数据的能力实现步骤1创建对象newXMLHttpRequest()2配置请求xhr.open('GET',url,true)3设置回调onload/onreadystatechange4发送请求xhr.send()代码示例readyState状态值0-UNSENT1-OPENED2-HEADERS_RECEIVED3-LOADING4-DONEvarxhr=newXMLHttpRequest();xhr.open('GET','api-list.php',true);xhr.onload=function(){if(xhr.status===200){console.log(xhr.responseText);}else{console.error('请求失败');}};xhr.onerror=function(){console.error('网络错误');};xhr.send();10.4.1什么是跨域从一个域名的页面去请求另一个域名的资源，由于浏览器同源策略限制，JavaScript脚本不能直接访问不同域的资源同源策略要求协议Protocolhttp/https域名Domain端口Port80/443/8080

三者必须完全相同，否则浏览器会认为是跨域请求跨域需求场景数据接口分离前端应用和后端API部署在不同服务器资源共享多个网站共享同一套后端资源或数据第三方服务调用百度地图API、微信登录等服务10.4.2-10.4.4跨域解决方案JSONP核心原理利用script标签不受同源策略限制的特性实现方式callback(jsonData)特点兼容性好仅支持GET请求存在安全隐患适用场景：简单的跨域GET请求CORS核心原理服务器设置HTTP响应头允许跨域实现方式Access-Control-Allow-Origin:*特点W3C标准支持所有HTTP方法安全性可控适用场景：现代Web应用首选方案服务器代理核心原理通过同源服务器转发请求绕过限制实现方式PHPCURL转发请求特点灵活性高可控制访问权限增加服务器负担适用场景：无法修改目标服务器时使用Chapter10·AjaxTechnology本章总结与作业知识要点Ajax核心概念异步JavaScript与XML，实现无刷新数据交换jQuery实现方法$.get()、$.post()、$.ajax()三种方式原生JavaScript实现XMLHttpRequest对象的底层工作机制跨域解决方案JSONP、CORS、服务器代理三种方式课后作业1理解Ajax工作原理，访问各