当前位置：首页 > news >正文

做网站起名字互联网电商平台

news 2026/4/8 4:20:04

做网站起名字,互联网电商平台,个人可以做网站推广,做一个网上商城需要多少钱ajax 基础详细讲解附小例子 ajax概述 ajax是一种组合技术(JavaScript,HTML,CSS,XML, DOM,XMLHttpRequest），全拼为：Asynchronous javascript and XML。它是一种在无需重新加载整个网页的情况下，就能够更新部分网页的技术。 aja…

ajax 基础详细讲解附小例子

ajax概述

ajax是一种组合技术(JavaScript,HTML,CSS,XML, DOM,XMLHttpRequest），全拼为：Asynchronous javascript and XML。它是一种在无需重新加载整个网页的情况下，就能够更新部分网页的技术。

ajax的特色：异步传输

借助JavaScript内部的XMLHttpRequest对象可以进行异步数据传输，使用户在等待服务器返回数据的同时，可以进行页面的其他操作。

ajax实现流程：

1.创建XMLHttpRequest对象

var xhr=new XMLHttpRequest();

2.设置回调函数onreadystatechange,接收服务器端的信息以进行处理。onreadystatechange 监控readyState的变化，如果readyState变化，则触发该函数配置请求参数

xhr.onreadystatechange=function(){if(xhr.readyState==4){//此时就可以用 xhr.responseText 接收后端servlet发来的数据var data=xhr.responseText;}
}

这里说一下readyState属性（表示XMLHttpRequest对象的状态）的五个值：

0 ：Uninitialized ，初始化状态。表示XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1 ：Open ，表明open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。

2 ：Send，表明Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。

3 ：Receiving，表明所有响应头部都已经接收到。响应体开始接收但未完成。

4 ：Loaded,表明HTTP 响应已经完全接收。

只有当xhr.readyState ==4 的时候，才可以去接收后端servlet发来的数据。

3.使用open方法发送请求

//下面是open方法的使用方法
xhr.open("请求方式post/get","url 请求地址",[true]/false 是否异步);
//如果此处的第一个参数为post的话，要发送数据到服务器就要用send方法。
//而如果是get方式的话 则 (下面写的servlet是指你请求的url地址)
xhr.open("get","servlet?key="+value,true);

4.设置编码方法

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

5.使用send方法发送请求到服务器并接收回应

//其中参数const为要发送到服务器的内容 例如 var value="迪迦";
//								xhr.send("key="+value);
xhr.send(const);
//当open方法的请求方式为post时，用send方法发送数据。否则
xhr.send(null);

以上是ajax在前端js代码中的使用方法

而后端中，emmmm

举个例子

首先，我在html中创建了两个input输入框来分别输入学号，姓名

	学号：<input type="text" id="code"/><br/>姓名：<input type="text" id="name"/><br/><input type="button" onclick="synchronizeSubmitInfo()" value="提交"/>

用onclick方法来实现ajax传输，下面是synchronizeSubmitInfo()在js中的定义

function synchronizeSubmitInfo(){//获取id为code的text框输入的值var code=document.getElementById("code").value;//获取id为name的text框输入的值var name=document.getElementById("name").value;//创建一个people对象，将其定义成JSON格式的字符串对象var people={"code":code,"name":name};var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4){//此处安排在后面说 先说从前端发送数据给后端 以及后端的响应}//JSON.stringify方法：将对象字符串化 --> json，emmm,变成json对象var peoplestr=JSON.stringify(people);//post请求方式，请求url为 myservletxhr.open("post","./myservlet",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送数据xhr.send("text="+peoplestr);
}

接下来，是后端代码

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//下面两句是防止乱码搞的，嗯就是字面意思，设置字符格式为utf-8request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");//用request.getParameter方法来接收ajax发送来的数据，text即为ajax发送的数据名String text=request.getParameter("text");//创建一个Gson对象，需要引入Gson的jar包Gson gson=new Gson();//gson.fromJson方法，把接收到的json转化为javabean的格式，注意后面参数应为.class的形式People people=gson.fromJson(text, People.class);//这里则是用控制台测试一下得到的数据System.out.println(people);System.out.println(people.getCode());}

在这里插入图片描述

上面是输入之后的数据，嗯在控制台得到的结果为:

在这里插入图片描述
说明得到了数据，异步传输成功

接下来是后端传数据到前端，emmm还是一样的例子

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubrequest.setCharacterEncoding("UTF-8");response.setCharacterEncoding("utf-8");String text=request.getParameter("text");Gson gson=new Gson();People people=gson.fromJson(text, People.class);System.out.println(people);System.out.println(people.getCode());//以上是 后端接收前端数据的代码//下面是  后端发送数据的代码 (*/ω＼*)//创建一个People对象，用set方法对其赋值People people1=new People();people1.setName("英宗徐");people1.setCode("22;//用gson.toJson("对象")方法，将java对象(javabean)转化成json格式的字符串String json=gson.toJson(people1);//把json格式的字符串发送给前端response.getWriter().print(json);}

然后是前端js代码(ง •_•)ง

function synchronizeSubmitInfo(){//获取id为code的text框输入的值var code=document.getElementById("code").value;//获取id为name的text框输入的值var name=document.getElementById("name").value;//创建一个people对象，将其定义成JSON格式的字符串对象var people={"code":code,"name":name};var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4){//用xhr.responseText接收到后端发来的json格式的字符串数据var people=xhr.responseText;//用JSON.parse方法，把people转化为json对象var s=JSON.parse(people);//在前端的控制台打印出json对象console.log(s);}}//JSON.stringify方法：将对象字符串化 --> json，emmm,变成json对象var peoplestr=JSON.stringify(people);//post请求方式，请求url为 myservletxhr.open("post","./myservlet",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送数据xhr.send("text="+peoplestr);
}