AJAX初学者简单小示例

最新推荐文章于 2023-04-12 23:37:53 发布

wxlovezyd

最新推荐文章于 2023-04-12 23:37:53 发布

阅读量431

点赞数

分类专栏： javascript 文章标签： ajax javascript

本文链接：https://blog.csdn.net/wxlovezyd/article/details/75127597

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初学AJAX，简单的实现了一个小案例：web界面提供两个文本输入框，两个按钮和一个DIV盒子，将文本输入框输入的内容显示到DIV中。这里使用两种提交方式：一种GET提交方式，一种POST提交方式。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

这个案例我们使用Myeclipse编写，首先创建一个index.jsp页面，在head里面写入下面这段代码：

function setGET(){

//获取XMLHttpRequest对象

createXHR();

//根据document对象的getElementById方法获取第一个文本输入框的内容

var username=document.getElementById("username").value;

//根据document对象的getElementById方法获取第二个文本输入框的内容

var age=document.getElementById("age").value;

//将两个文本输入框的内容拼接为一个字符串

var queryStr="username="+username+"&age="+age;

//提供发送的url

var url="login.jsp?"+queryStr+"&stampTime:"+new Date().getTime();

//使用XMLHttpRequest对象的open方法初始化参数（提交方式，url,是否异步）

xmlHttp.open("GET", url,true)

//将初始化的参数发送出去

xmlHttp.send(null);

//调用回调函数

xmlHttp.onreadystatechange=requestCallBack;
}
//按钮的POST提交方法

function setPOST(){

//获取XMLHttpRequest对象

createXHR();

//根据document对象的getElementById方法获取第一个文本输入框的内容

var username=document.getElementById("username").value;

//根据document对象的getElementById方法获取第二个文本输入框的内容

var age=document.getElementById("age").value;

//将两个文本输入框的内容拼接为一个字符串

var queryStr="username="+username+"&age="+age;

//提供发送的url

var url="login.jsp?"+"stampTime:"+new Date().getTime();

//使用XMLHttpRequest对象的open方法初始化参数（提交方式，url,是否异步）

xmlHttp.open("POST", url,true)

//设置请求头来设置以表单的形式来提交内容信息

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//将要发送的信息发送出去

xmlHttp.send(queryStr);

//调用回调函数

xmlHttp.onreadystatechange=requestCallBack;
}

</script>

在body里面提供两个文本输入框、两个按钮和一个DIV盒子。代码如下：

然后新建一个login.jsp（名字可以自己取）页面当作服务器，为了简便在jsp界面中直接写入Java代码。代码如下：

<% //服务器获取文本框输入的内容
String username=request.getParameter("username");
String age=request.getParameter("age");

//判断提交方式
if(request.getMethod().equals("GET")){
out.println("GET:"+"username:"+username+",age:"+age);
}else{
out.println("POST:"+"username:"+username+",age:"+age);
}
%>

wxlovezyd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AJAX初学者简单小示例

初学AJAX，简单的实现了一个小案例：web界面提供两个文本输入框，两个按钮和一个DIV盒子，将文本输入框输入的内容显示到DIV中。这里使用两种提交方式：一种GET提交方式，一种POST提交方式。AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
复制链接

扫一扫