Ajax编程基础Contents目Ajax基础Ajax运行原理及实现Ajax异步编程Ajax基础传统网站中存在的问题网速慢的情况下，页面加载时间长，用户只能等待表单提交后，如果一项内容不合格，需要重新填写所有表单内容页面跳转，重新加载页面，造成资源浪费，增加用户等待时间Ajax概述Ajax：标准读音[edæks]ˈɪˌʒ，中文音译：阿贾克斯它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。Ajax基础Ajax的应用场景1.页面上拉加载更多数据2.列表数据无刷新分页3.表单项离开焦点数据验证4.搜索框提示文字下拉列表Ajax基础Ajax的运行环境Ajax技术需要运行在网站环境中才能生效，当前课程会使用Node创建的服务器作为网站服务器。Ajax基础Contents目Ajax基础Ajax运行原理及实现Ajax异步编程Ajax运行原理及实现Ajax运行原理浏览器端服务器端请求响应浏览器端服务器端请求响应Ajax创建响应开发人员不可控开发人员可控Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。Ajax的实现步骤1.创建Ajax对象varxhr=newXMLHttpRequest();2.告诉Ajax请求地址以及请求方式xhr.open('get','http://www.example.com');3.发送请求xhr.send();Ajax运行原理及实现4.获取服务器端给与客户端的响应数据xhr.onload=function(){console.log(xhr.responseText);}服务器端响应的数据格式在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。JSON.parse()//将json字符串转换为json对象在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。Ajax运行原理及实现请求参数传递传统网站表单提交Ajax运行原理及实现GET请求方式xhr.open('get','http://www.example.com?name=zhangsan&age=20');POST请求方式xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')xhr.send('name=zhangsan&age=20');Ajax运行原理及实现请求参数传递请求报文客户端服务器端请求报文请求方...
