云服务器做网站新手教程,免费网页模板之家,品牌策划方案设计,资阳seo 文章目录 一、什么是Ajax二、全局刷新和局部刷新二、Ajax中使用XMLHttpRequest对象#xff08;Ajax核心步骤#xff09;1、创建异步对象2、给异步对象绑定事件3、异步对象的属性 readyState 表示异步对象请求的状态变化4、初始异步请求对象5、使用异步对象发送请求6、jso… 文章目录 一、什么是Ajax二、全局刷新和局部刷新二、Ajax中使用XMLHttpRequest对象Ajax核心步骤1、创建异步对象2、给异步对象绑定事件3、异步对象的属性 readyState 表示异步对象请求的状态变化4、初始异步请求对象5、使用异步对象发送请求6、json使用 一、什么是Ajax Ajax全称Asynchronous JavaScript and XML异步JavaScript和XML是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。它不是一种新的编程语言而是由多种技术组合而成的包括HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT以及最重要的XMLHttpRequest。 Ajax的原理是通过XmlHttpRequest对象来向服务器发异步请求从服务器获得数据然后用JavaScript来操作DOM而更新页面。
使用Ajax技术的网页应用能够快速地将增量更新呈现在用户界面上而不需要重载刷新整个页面从而节省网络带宽提高网页加载速度缩短用户等待时间改善用户体验。
Ajax通过异步通信的方式实现了在不刷新整个页面的情况下对页面的局部进行更新极大地提升了Web应用的交互性和性能。
二、全局刷新和局部刷新
全局刷新整个浏览器被新的数据覆盖。在网络中传输大量的数据浏览器需要加载渲染页面。局部刷新在浏览器器的内部发起请求获取数据改变页面中的部分内容其余的页面无需加载和渲染。 网络中数据传输量越少给用户的感受越好。 Ajax是用来做局部刷新的局部刷新使用的核心对象异步对象XMLHttpRequest。这个异步对象是存在浏览器内存中的使用JavaScript语法创建和使用XMLHttpRequest对象。
Ajax包含的技术主要有JavaScript、dom、css、xml等。核心是JavaScript 和 xml【被json代替】。JavaScript负责创建异步对象发送请求更新页面的dom对象。Ajax是一种做局部刷新的新方法2003不是一种语言
XML网络中的传输的数据格式使用json替换了XML。
数据数据1宝马1/数据1数据2宝马2/数据2数据3宝马3/数据3数据4宝马4/数据4
/数据二、Ajax中使用XMLHttpRequest对象Ajax核心步骤
1、创建异步对象
var xmlHttp new XMLHttpRequest();2、给异步对象绑定事件
onreadystatechange 当异步对象发起请求获取了数据都会触发这个事件。这个事件需要指定一个函数 在函数中处理状态的变化。
btn.onclick fun1()function fun1(){alert(按钮单击)
}例如
xmlHttp.onreadystatechange function(){处理请求的状态变化。if(xmlHttp.readyState 4 xmlHttp.status 200 ){// 可以处理服务器端的数据更新当前页面var data xmlHttp.responseText;document.getElementById(name).value data;}}3、异步对象的属性 readyState 表示异步对象请求的状态变化
0创建异步对象时 new XMLHttpRequest();1初始异步请求对象xmlHttp.open(请求方式请求地址true);2发送请求xmlHttp.send();3从服务器端获取了数据此时3是异步对象内部使用获取了原始的数据。4异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。
在4的时候开发人员做什么更新当前页面
异步对象的status属性表示网络请求的状况的200404500需要是当status200时表示网络请求是成功的。
4、初始异步请求对象
异步的方法open()
xmlHttp.open(请求方式get|post, 服务器端的访问地址, 同步|异步请求(默认是true异步请求));// 例如
xmlHttp.open(get, loginServlet?namezspwd123,true);5、使用异步对象发送请求
xmlHttp.send();
获取服务器端返回的数据使用异步对象的属性responseText
使用例子xmlHttp.responseText
回调当请求的状态变化时异步对象会自动调用onreadystatechange 事件对应的函数。
访问地址使用get方式传递参数
http://localhost:8080/course_myajax/bmiPrint?name李四w82h1.8
6、json使用
1、Ajax发起请求后会返回的一个json格式的字符串
{ name: 河北, jiancheng: 冀, shenghui: 石家庄}2、json分类
json对象格式JSONObject这种对象的格式名称: 值也可以看做是key: value格式。json数组格式JSONArray
// 基本格式
[{ name: 河北, jiancheng: 冀, shenghui: 石家庄},{ name: 山西, jiancheng: 晋, shenghui: 太原}
]3、为什么要使用json
json格式好理解json格式数据在多种语言中比较容易处理。 使用java javascript读写json格式的数据比较容易。json格式数据他占用的空间下在网络中传输快用户的体验好。处理json的工具库Gsongoogle、Fastjson阿里、jackson、 json-lib。在js中的可以把json格式的字符串转为json对象 json中的key就是json对象的属性名。
当然下面是一个简单的Ajax示例演示了如何使用JavaScript和XMLHttpRequest对象来执行异步HTTP请求并更新网页内容。请注意为了简化示例我们假设服务器上存在一个名为example.txt的文件它包含一些简单的文本内容。
!DOCTYPE html
html langen
head meta charsetUTF-8 titleAjax 示例/title script function loadContent() { // 创建一个新的XMLHttpRequest对象 var xhr new XMLHttpRequest(); // 定义请求完成时的回调函数 xhr.onreadystatechange function() { if (xhr.readyState 4 xhr.status 200) { // 请求成功完成服务器返回状态码200 // 更新页面内容 document.getElementById(content).innerHTML xhr.responseText; } }; // 设置请求方法和URL xhr.open(GET, example.txt, true); // 发送请求 xhr.send(); } /script
/head
body h1Ajax 示例/h1 button onclickloadContent()加载内容/button div idcontent/div
/body
/html在这个示例中定义了一个名为loadContent的JavaScript函数。当点击按钮时这个函数会被调用。
首先我们创建一个新的XMLHttpRequest对象。然后我们定义了一个回调函数onreadystatechange这个函数会在请求的状态改变时被调用。当请求完成readyState 4并且服务器返回状态码为200成功时我们更新页面上id为content的div元素的内容。接着我们使用open方法设置请求的方法和URL。在这个例子中我们使用GET方法请求example.txt文件。最后我们使用send方法发送请求。请注意这个例子假设服务器上的example.txt文件是可访问的并且与你的HTML文件在同一个域名下。如果文件位于其他位置你需要修改xhr.open方法中的URL来指向正确的位置。
此外现代Web开发中可能会更倾向于使用更高级的库如jQuery的$.ajax方法或现代的Fetch API来执行Ajax请求因为它们提供了更简洁、更强大的功能并且能更好地处理错误和跨域请求。
