AJAX 与 JQuery 基础知识

最新推荐文章于 2022-08-25 23:22:41 发布

zeubb88

最新推荐文章于 2022-08-25 23:22:41 发布

阅读量116

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/zeubb88/article/details/90452316

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

AJAX的概述：

什么是AJAX？ asynchronous javascript and xml

同步与异步的区别，一个请求如果为同步只能等待响应结果，如果为异步则可以不必等待响应可以先做其他事。

同步：

异步：

实现异步核心：

XMLHTTPRequest 对象

属性：

readystate 状态（0未初始化 1 初始化 2发送数据 3数据传输中 4完成）

onreadystatechange 当状态改变时触发的函数

status 状态码， response的状态码 200成功 302 重定向，304查找缓存 404 找不到资源 500 错误

responseText 响应的文本数据

responseXML 响应的XML数据

方法：

open（请求方式，请求路径，是否异步） send （请求参数） setRequestHeader(处理post请求方式的中文问题)

创建xmlhttprequest

IE: 封装在 Activexobject

function createXmlHttp(){
   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;
 }

firefox: 可以直接创建直接new

var xmlHttp=new XMLHttpRequest();

post方式：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="${ pageContext.request.contextPath }/js/ajax_post.js"></script>
  <script type="text/javascript">
function ajax_post2(){
    //1 获取对象
    debugger;
    var xhr =  createXMLHttp()
    //设置监听
    xhr.onreadystatechange = function () {
        if (xhr.readyState==4){
            if (xhr.status==200){
                document.getElementById("d1").innerHTML=xhr.responseText;
            }
        }
    }
    //设置地址打开请求
    xhr.open("POST","/postajax",true);
    //设置头信息
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    //设置参数
    xhr.send("username=zhangsan&password=123");
}
  </script>
</head>
<body>
<h1>AJAX的POST方式的异步请求</h1>
<div id="d1" style="width:300px;height:300px;border:1px solid blue">
	
</div>
<input id="bt1" type="button" value="AJAX的POST请求" onclick="ajax_post2()"/>
</body>
</html>

找不到访问的页面怎么办？？小技巧：在 tomcat conf 的web.xml 中找到 listing 属性将 false 改成 true后

zeubb88

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 与 JQuery 基础知识

AJAX的概述：什么是AJAX？ asynchronous javascript and xml同步与异步的区别，一个请求如果为同步只能等待响应结果，如果为异步则可以不必等待响应可以先做其他事。同步：异步：实现异步核心： XMLHTTPRequest 对象属性：readystate 状态（0未初始化 1 初始化 2发送数据 ...
复制链接

扫一扫