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

建设一个社交网站需要多少钱普陀区网站制作

news 2025/9/17 23:11:32

建设一个社交网站需要多少钱,普陀区网站制作,公司自建网站需要多少钱,一个网站的建设成本现在，在网页中通过超链接，表单就可以向后端发送请求，后端也可以正常响应内容。以前通过表单访问后端的请求方式称为同步请求同步请求当网页与后端交互时，前端不能再进行其他操作服务器端响应回来的内容，会把整个浏…

现在，在网页中通过超链接，表单就可以向后端发送请求，后端也可以正常响应内容。

以前通过表单访问后端的请求方式称为同步请求

同步请求

当网页与后端交互时，前端不能再进行其他操作

服务器端响应回来的内容，会把整个浏览器的内容覆盖掉

这种请求方式在前后端交互时，就不太友好了

现在的前后端交互请求，都是使用的是异步请求

举例说明：

前端注册网页(实现同步请求)：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function checkAccount(account){//同步请求，已经被抛弃了location.href = "http://127.0.0.1:8088/dormServer/register?account="+account;}function relogin(){location.href = "http://127.0.0.1:8848/webtest/login.html";}</script></head><body><form method="post">账号:<input type="text" name="account" value="" onblur="checkAccount(this.value)"/> <span id="msgid"></span><br/>密码:<input type="password" name="password" value=""/> <br/><input type="button" value="提交" onclick="relogin()"/></form></body>
</html>

在注册界面输入好账号(已存在)后：

当鼠标焦点不在账号栏时：

页面直接被响应到的信息覆盖了，后续操作无法进行。所以同步请求就被无情抛弃了~

异步请求

同时可以做多件事情(前端与服务器交互时，不影响前端网页其他操作)

使用js中提供的XMLHttpRequest对象实现发送异步请求，和接收服务器响应

异步请求时，会出现跨域访问问题：浏览器默认不允许js对象接收来自其他服务器响应的内容。

举例说明：

将前端网页的方法中将异步代码实现：

function checkAccount(account){//异步请求，使用js对象发送请求var httpobj = new XMLHttpRequest();//封装请求地址和数据httpobj.open("get","http://127.0.0.1:8088/dormServer/register?account="+account,true);//发送请求httpobj.send();//接收响应httpobj.onreadystatechange = function(){//httpobj.responseText;  获得到响应的内容document.getElementById("msgid").innerHTML = httpobj.responseText;}}

在注册界面输入好账号(已存在)后：

当鼠标焦点不在账号栏时，从后端响应回来的信息就会立刻附在账号栏后反馈给用户。

但如果有很多种需要实时为用户反馈信息的话，这种异步请求的实现代码就非常繁琐，在多个前端网页也显得非常冗余。

所以就有了axios框架去封装异步请求的代码，减少了代码的冗余。

axios

axios 是一个HTTP 的网络请求库.

<script src="js/axios.min.js"></script>

然后注册网页的前端方法中的异步请求就会变成

function checkAccount(account){//axios框架对异步请求进行封装axios.get("http://127.0.0.1:8088/dormServer/register?account="+account).then((resp)=>{console.log(resp);document.getElementById("msgid").innerHTML = resp.data;//resp.data取出后端响应的内容});}

极大减少了代码的数量，增加了代码的观赏性。

跨域问题

不同服务之间进行访问

只要请求协议，域名，端口其中一项不同，就属于跨域访问

在后端过滤器中响应时，告知前端本次响应是安全的，允许跨域访问

跨域问题是一个前端问题，也可以在后端解决，也可以在前端解决

配置跨域过滤器

public class CorsFilter implements Filter {public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;//允许携带Cookie时不能设置为* 否则前端报错httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//"origin"允许所有请求跨域,前期都是自己的浏览器访问自己的服务器，也可以使用回环地址httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookiefilterChain.doFilter(servletRequest, servletResponse);}
}

在web.xml文件中配置注册跨域过滤器

<!--配置允许跨域过滤器--><filter><filter-name>corsfilter</filter-name><filter-class>com.ffyc.dormServer.filter.CorsFilter</filter-class></filter><filter-mapping><filter-name>corsfilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>

json

json javaScript object Notation javaScript对象表示法

两种不同的语言之间如何进行数据交互(例如C语言程序与 java程序之间要进行数据交互)

json是一种公认的js识别的对象表示法，对于java而言就是一种特定格式的字符串

对象：{键:值,键:值} 例如：{name:jim,age:20} 集合：[{键:值,键:值}，{键:值,键:值}]

模拟json转换数据格式

1、写一个SearchServlet类

public class SearchServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name = req.getParameter("name");//模拟从数据库根据名字查询学生所有信息，然后叫数据封装到一个学生对象中Student student = new Student();student.setNum(101);student.setName(name);student.setGender("男");student.setAge(20);PrintWriter printWriter = resp.getWriter();ObjectMapper objectMapper = new ObjectMapper();String jsonstr = objectMapper.writeValueAsString(student);printWriter.print(jsonstr);//打印响应一个学生对象}

2、在web.xml文件中配置 SearchServlet

<servlet><servlet-name>search</servlet-name><servlet-class>com.ffyc.dormServer.web.SearchServlet</servlet-class></servlet><servlet-mapping><servlet-name>search</servlet-name><url-pattern>/search</url-pattern></servlet-mapping>

在前端写一个search.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 导入axios框架 --><script src="js/axios.min.js"></script><script>function search(){var name = document.getElementById("nameid").value;axios.get("http://127.0.0.1:8088/dormServer/search?name="+name).then((resp)=>{if(resp.data.code == 200){console.log(resp.data);alert(resp.data.massage);document.getElementById("numid").innerHTML = resp.data.data.num;document.getElementById("nameid1").innerHTML = resp.data.data.name;document.getElementById("genderid").innerHTML = resp.data.data.gender;document.getElementById("ageid").innerHTML = resp.data.data.age;}else if(resp.data.code == 500){alert(resp.data.massage);}});}</script></head><body><input type="text" id="nameid"/><input type="button" value="搜索" onclick="search()"/><div>学号：<span id="numid"></span>姓名：<span id="nameid1"></span>性别：<span id="genderid"></span>年龄：<span id="ageid"></span></div></body>
</html>

测试json：

打开search网页