JavaWeb |
您所在的位置：网站首页 › java中@override的用法 › JavaWeb |
JavaWeb
|
目录 Ajax技术详解 Ajax简介 Ajax 的使用 Ajax 的运行原理 XMLHttpRequest 对象 Ajax 的使用步骤 Ajax请求 编辑 Get/Post请求 JSON详解 JSON简介 为什么要使用 JSON JSON 格式的特征 JSON的语法规则 JOSN的数据类型 JACKSON 的使用 Jackson 简介 在项目中引入Jackson Jquery 的 Ajax 使用 Ajax 实战 创建项目 添加依赖包 导入jquery包 创建实体类User 创建页面 创建UserServlet 查询用户列表 添加用户 servlet相关 更新用户 删除用户 Ajax技术详解Ajax简介
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建 交互式、快速动态应用的网页开发技术，无需重新加载整个网页的 情况下，能够更新页面局 部数据的技术。通过在后台与服务器进行少量数据交换，Ajax 可以 使页面实现异步更新。这意味着可以在不重新加载整个页面的情况 下，对页面的某部分进行更新。
XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用， 通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数 据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个 页面刷新，因此成为 Ajax 编程的核心对象。 Ajax 的使用步骤创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest();给定请求方式以及请求地址 xhr.open("get","http://www.example.com");发送请求 xhr.send()获取服务器端给客户端的响应数据 xhr.onreadystatechange = function(){ //0:请求未初始化 //1:服务器连接已建立 //2:请求已接收 //3:请求处理中 //4:请求已完成，且响应已就绪 if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById("span").innerHTML=xhr.responseText; alert(xhr.responseText); } }Ajax请求
请求的步骤： 正如您在上面的示例中所看到的，XMLHttpRequest对象起着重要作用 1 用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest对象。 2 HTTP请求由XMLHttpRequest 对象发送到服务器。 3 服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。 4 检索数据。 5 服务器将 XML 数据或 JSON数据发送到 XMLHttpRequest 回调函数。 6 HTML和 CSS 数据显示在浏览器上。 Get/Post请求get 和 post请求是http协议中的两种请求方式。 1、get请求一般用来请求获取数据，post请求一般作为发送数据到后台，传递数据，创建数据； 2、get请求也可以传参到后台，但是传递的参数则显示在地址栏，安全性低，且参数的长度也有限制 （2048字符），post请求则是将传递的参数放在request body中，不会在地址栏显示，安全性比 get请求高，参数没有长度限制； 3、get请求刷新浏览器或者回退没有影响，post请求则会重新请求一遍； 4、get请求可以被缓存，也会保留在浏览器的历史记录中，post请求不会被缓存，也不会保留在浏览 器的历史记录中； 5、get请求通常是通过url地址请求，post常见的则是form表单请求 Get请求示例 xhr.open("GET", "http://localhost:8080/get.txt?t=" + Math.random(), true); xhr.open("GET", "http://localhost:8080/get.txt?fname=zhang&lname=san", true);Post请求示例 xhr.open("POST","http://localhost:8080/post.txt", true); xhr.setRequestHeader("Contenttype","application/x-www-form-urlencoded"); xhr.send("fname=zhang&lname=san");同步或异步 Async=true 当使用 async=true时，请规定在响应处于onreadystatechange事 件中的就绪状态时执行的函数 xhr.onreadystatechange = function(){ if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("view").innerHTML = xhr.responseText; } } xmlhttp.open("GET","get.txt",true); xmlhttp.send();Async = false 我们不推荐使用 async=false，但是对于一些小型的请求，也是可以 的。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁 忙或缓慢，应用程序会挂起或停止。 xmlhttp.open("GET","get.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;Ajax服务器响应 状态行 xhr.status状态码，如200，304，404等； 响应主体 xhr.responseText与xhr.responseXML都表示响应主体。 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText或responseXML属性。
|
【本文地址】
今日新闻 |
推荐新闻 |