总结之Ajax介绍及基本语法与使用

矫情吗；* 2022-05-13 05:30 179阅读 0赞

## Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 ##

*  目前JavaScript提供的基础ajax都很少使用,在日常使用中都是用JQuery的$ajax.

## 少啰嗦，先看东西 ##

$('#submit').click(function () {
    		  //获取页面的输入框的值
              var $username=$('#username').val();
              var $password=$('#password').val();
              //查看值是否获取到了
              console.log($username);
              console.log($password);
              //ajax应用
              $.ajax({
                  type: 'post',//传输方法通常get和post
                  url: "${pageContext.request.contextPath}/login",//Servlet请求路径
                  data: {username:$username,password:$password},//向后台传输的数据
                  dataType: "text",//数据格式通常text，json，xml
                  success: function (data) {//ajax请求成功后，后台返回的数据
                      var mydata =data;
                      console.log(mydata)//查看数据
                      if (mydata == "1") {
                          console.log("成功");
                      }
                      else {
                          console.log("失败");
                      }
                  }
              })
    
          });

## Servlet代码 ##

String username =request.getParameter("username");
           String password =request.getParameter("password");
           username =new String(username.getBytes("iso-8859-1"),"UTF-8");
           password =new String(password.getBytes("iso-8859-1"),"UTF-8");
           UserService userService=new UserServiceImpl();
           User user =userService.getUserByUsernameAndPassword(username,password);
            if(user!=null){
                System.out.println("登录成功");
                //session作用域，一次会话有效
                HttpSession session=request.getSession();
                session.setAttribute("user",user);
                String code ="1";
                response.getWriter().write(code);
              }else {
                System.out.println("登录失败");
                String code ="0";
                response.getWriter().write(code);
            }

注意事项：如果没有导入本地的jQuery文件，请加上下面代码才有效。

## ajax优点 ##

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

## 各参数解释 ##

1.url:  
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:  
要求为String类型的参数，请求方式（post或get）默认为get。  
3.data:  
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。  
4.dataType:  
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：  
xml：返回XML文档，可用JQuery处理。  
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。  
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。  
json：返回JSON数据。  
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。  
text：返回纯文本字符串。  
5.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。  
(1)由服务器返回，并根据dataType参数进行处理后的数据。  
(2)描述状态的字符串。  
function(data, textStatus)\{  
//data可能是xmlDoc、jsonObj、html、text等等  
this; //调用本次ajax请求时传递的options参数  
\}  
6.error:  
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：  
function(XMLHttpRequest, textStatus, errorThrown)\{  
//通常情况下textStatus和errorThrown只有其中一个包含信息  
this; //调用本次ajax请求时传递的options参数  
\}