分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 软件开发

Ajax

发布时间：2023-09-06 02:34责任编辑：沈小雨关键词：Ajax

Ajax定义(引入)

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已


1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

创建对象

function ?ajaxFunction(){ ??var xmlHttp; ??try{ // Firefox, Opera 8.0+, Safari ???????xmlHttp=new XMLHttpRequest(); ???} ???catch (e){ ??try{// Internet Explorer ????????xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); ?????} ???catch (e){ ?????try{ ????????xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); ?????} ?????catch (e){} ?????} ???}return xmlHttp; }
19
1
 ???function ajaxFunction(){
2
 ???????? var xmlHttp;
3
 ???????? try{ // Firefox, Opera 8.0+, Safari
4
 ????????   xmlHttp=new XMLHttpRequest();
5
 ???????? ?}
6
 ???????? catch (e){
7
 ???????????? try{// Internet Explorer
8
 ????????????    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
9
 ????????????  ?}
10
 ???????????? catch (e){
11
 ????????????  try{
12
 ????????????    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
13
 ????????????  ?}
14
 ????????????  catch (e){}
15
 ????????????  ?}
16
 ???????? ?}
17
 ???
18
 ???????????return xmlHttp;
19
 ????????}

get请求

 function getFun() {
 ??????//创建对象
 ??????var request = ajaxFunction();

 ??????/*
 ??参数一： 请求类型 ?GET or ?POST
 ??参数二： 请求的路径
 ??参数三： 是否异步， true ?or false
*/
 ??????//发送请求
 ??????request.open("GET","http://localhost:8080/HttpServletRequestDemo1?username=mlj",true);
 ??????//获取响应的数据
 ??????request.onreadystatechange = function(){

 ??????????//前半段表示 已经能够正常处理。 ?再判断状态码是否是200
 ??????????if(request.readyState == 4 && request.status == 200){
 ??????????????//弹出响应的信息
 ??????????????alert(request.responseText);
 ??????????}
 ??????};
 ??????request.send();



 ??}

post请求

 ?function postFun() { ???????//创建对象 ?????var request = ??ajaxFunction(); ?????//发送数据 ???????request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true); ???????request.send(); ???} ???//带数据过去 ???function postFun() { ???????//创建对象 ???????var request = ??ajaxFunction(); ???????//发送数据 ???????request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true); ???????//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据 ???????request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ???????//带数据过去 ?， 在send方法里面写表单数据。 ???????request.send("username=aobama"); ???} ???//获取数据 ???function postFun() { ???????//创建对象 ???????var request = ??ajaxFunction(); ???????//发送数据 ???????request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true); ???????//想获取服务器传送过来的数据， 加一个状态的监听。 ???????request.onreadystatechange=function(){ ???????????if(request.readyState==4 && request.status == 200){ ???????????????alert("post："+request.responseText); ???????????} ???????} ???????//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据 ???????request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ???????//带数据过去 ?， 在send方法里面写表单数据。 ???????request.send("username=aobama"); ???}
38
1
 function postFun() {
2
    //创建对象
3
   var request =  ajaxFunction();
4
   //发送数据
5
    request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
6
    request.send();
7
  ?}
8
  //带数据过去
9
  function postFun() {
10
    //创建对象
11
    var request =  ajaxFunction();
12
    //发送数据
13
    request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
14
    //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
15
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
16
17
    //带数据过去 ?， 在send方法里面写表单数据。
18
    request.send("username=aobama");
19
  ?}
20
  //获取数据
21
  function postFun() {
22
    //创建对象
23
    var request =  ajaxFunction();
24
    //发送数据
25
    request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
26
    //想获取服务器传送过来的数据， 加一个状态的监听。
27
    request.onreadystatechange=function(){
28
      if(request.readyState==4 && request.status == 200){
29
30
        alert("post："+request.responseText);
31
      ?}
32
    ?}
33
    //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
34
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
35
36
    //带数据过去 ?， 在send方法里面写表单数据。
37
    request.send("username=aobama");
38
  ?}

onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

来源：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
0-4状态
属性描述
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status
200: "OK"
404: 未找到页面
302重定向
500服务器内部错误或发出程序异常
get()
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><div ></div><script src="../js/jquery-1.11.0.js"></script><script> ???$.get("/ServletTest?username=mljqqhq",{ name: "John", },function (data,status) { ???????$("#div1").html(data+status);//data是服务器响应的数据 ???????????})</script></body></html>
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Title</title>
6
</head>
7
<body>
8
<div ></div>
9
<script src="../js/jquery-1.11.0.js"></script>
10
<script>
11
  $.get("/ServletTest?username=mljqqhq",{ name: "John", },function (data,status) {
12
    $("#div1").html(data+status);//data是服务器响应的数据
13
    
14
  ?})
15
</script>
16
17
</body>
18
</html>
post()
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><div ></div><script src="../js/jquery-1.11.0.js"></script><script> ???$.post("/ServletTest",{"username":"mljqqhpost"},function (data,status) { ???????$("#div1").html(data+status);//data是服务器响应的数据 ???????????})</script></body></html>
x

  
我的编程学习网——分享web前端后端开发技术知识。  垃圾信息处理邮箱 tousu563@163.com   网站地图

  icp备案号 闽ICP备2023006418号-8
  不良信息举报平台 
  互联网安全管理备案
  Copyright  2023 www.wodecom.cn All Rights Reserved