如何开发一个手机网站,北京推广网站,展厅设计费,pi币最新消息1、引言
就是异步刷新#xff0c;AJAX要和XMLHttpRequest对象、JavaScript/DOM、CSS、XML一起使用
2、XMLHttpRequest对象
XMLHttpRequest对象#xff0c;异步的与服务器交换数据#xff0c;这意味着可以在不重新加载整个网页的情况下#xff0c;对网页的某部分进行更新…1、引言
就是异步刷新AJAX要和XMLHttpRequest对象、JavaScript/DOM、CSS、XML一起使用
2、XMLHttpRequest对象
XMLHttpRequest对象异步的与服务器交换数据这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新 XMLHttpRequest对象是ajax的基础 语法
var xhr new XMLHttpRequest();2.1 语法格式
如需将请求发送到服务器使用XMLHttpRequest()对象的open()、send()方法 send发送的数据给到open方法的url定义的页面里面
方法描述open(method,url,async规定请求的类型、URL以及是否异步处理请求。method请求的类型GET或者POSTurl文件在服务器上的位置asynctrue异步或false同步这个是默认true的不用设置send(string)将请求发送到服务器。string:仅用于POST请求
2.2 get请求代码
2.2.1 一个简单的GET请求
script typetext/javascript
var xhr new XMLHttpRequest();xhr.open(get, data,true);xhr.send();
/script其中的data是一个Servlet页面 2.2.2 url加唯一的ID
在上面的例子中您可能得到的是缓存的结果为了避免这种情况向URL添加一个唯一的IDtMath.random()
script typetext/javascriptvar xhr new XMLHttpRequest();xhr.open(get,data?tMath.random(),true)xhr.send();
/script2.2.3 通过GET方法发送数据
向URL添加信息username zhangsan、password 123
script typetext/javascriptvar xhr new XMLHttpRequest();xhr.open(get,data?usernamezhangsanpassword123,true)xhr.send();
/script2.3 post请求代码
一个简单的POST请求
scriptvar xhr new XMLHttpRequest();//一个简单的POST请求xhr.open(POST,data,true);xhr.send();
/script如果需要像html的form表单那样post数据请使用setRequestHeader()添加HTTP头在send方法中规定发送的数据
scriptvar xhr new XMLHttpRequest();xhr.open(POST,data,true);xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded);xhr.send(usernamezhangsanpassword123);
/script2.4 readyState
语法
script typetext/javascriptvar xhr new XMLHttpRequest();xhr.open(get, data,true);xhr.send();xhr.onreadystatechange () {if (xhr.readyState 4 xhr.status 200) {alert(xhr.responseText);}}
/script每当readyState改变时就会触发。onreadystatechange事件 在onreadystatechange事件中添加任务 readyState属性存有XMLHttpRequest的状态信息 当readyState等于4且状态为200时表示响应以就绪
属性描述onreadystatechange存储函数或函数名每当readyState属性改变时就会调用该函数。readyState存有XMLHttpRequest的状态。从0到4发生变化。0请求未初始 1服务器连接已建立 2请求已接收 3请求处理中 4请求已完成且响应已就绪status例200“OK”404未找到页面
3、例题1–用alert在浏览器输出servlet页面定义的字符串
servlet页面代码
WebServlet(name DataServlet, value /data)
public class DataServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding(UTF-8);response.setContentType(text/html;charsetutf-8);String mess 刘雨昕新歌未知计划上线啦;PrintWriter printWriter response.getWriter();printWriter.write(mess);printWriter.flush();printWriter.close();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}html页面代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script typetext/javascriptvar xhr new XMLHttpRequest();xhr.open(post, data,true);xhr.send();xhr.onreadystatechange () {if (xhr.readyState 4 xhr.status 200) {alert(xhr.responseText);}}
/script
/body
/html4、post例题
点击显示div内容
WebServlet(name DataServlet, value /data)
public class DataServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding(UTF-8);response.setContentType(text/html;charsetutf-8);String name request.getParameter(name);String pwd request.getParameter(pwd);PrintWriter printWriter response.getWriter();printWriter.write(name:name,password:pwd);printWriter.flush();printWriter.close();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#div1 {width: 200px;height: 100px;border: solid 2px rgba(255, 43, 10, 0.96);}/style
/head
body
button idbtn点击显示div/button
div iddiv1/div
script typetext/javascriptvar xhr new XMLHttpRequest();xhr.open(post, data, true);xhr.setRequestHeader(Content-type, application/x-www-form-urlencoded);xhr.send(namezhangsanpwd123);var div document.getElementById(div1);var btn document.getElementById(btn);btn.addEventListener(click, () {div.innerText xhr.responseText;})/script
/body
/html
