原生Ajax代码实现

最新推荐文章于 2024-01-13 22:40:12 发布

andalou2829

最新推荐文章于 2024-01-13 22:40:12 发布

阅读量101

点赞数 1

原文链接：http://www.cnblogs.com/wzqjy/p/7849997.html

版权

Ajax

Asynchronous JavaScript And XML

异步：

指一段程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反的则为同步，

自己理解的就是类似百度的搜索框输入内容时的提示相关的内容功能，ajax可以在不刷新整体页面的情况下，进行从后台取值，并返回数据到页面，其优势在于不阻塞程序的运行，从而提升整体上的执行效率。

现实生活中，打电话是同步，发短信是异步

XMLHttpRequest

浏览器内置对象，用于在后台与服务器通信，由此我们可以对页面进行部分更新，更不进行刷新整个页面的操作。

当以post方式请求时候，请求头中设置了“Content-type”，“application/x-www-form-urlencoded”,get方式请求就不需要，

api详解：

xhr.open(); 发起请求，可以是get或者post方式
xhr.setRequestHeader(); 设置请求头
xhr.send(); 发送请求主体，get方式使用null作为主体
xhr.onreadystatechange(){} 监听响应状态
xhr.readyState = 0：UNSENT open尚未启用
xhr.readyState = 1：OPENED open 已调用
xhr.readyState = 2：headers_received 接收到头消息
xhr.readyState = 3：loading 接收到主体
xhr.readyState = 4：done 响应完成
xhr.status 表示响应码 200 为正常
xhr.statusText 表示响应信息
xhr.getAllResponseHeaders() 获得全部响应头信息
xhr.responseText：响应主体

//浏览器兼容处理 undefined未定义的因为只有ie浏览器中存在这个ActiveXObject对象

 if(typeof ActiveXObject !=='undefined'){
 　　　　alert("ie");
 }else{
　　　　 alert("ii");
 }

IE浏览器创建ajax对象：

 var xhr = new ActiveXObject("Microsoft.XMLHTTP");//最原始的方式 --
 var xhr = new ActiveXObject("Msxm12.XMLHTTP");
 var xhr = new ActiveXObject("Msxm12.XMLHTTP.3.0");
 var xhr = new ActiveXObject("Msxm12.XMLHTTP.5.0");
 var xhr = new ActiveXObject("Msxm12.XMLHTTP.6.0");//维护的最高版本

主流浏览器创建对象(Firefix火狐，Chrome谷歌，safari新浪，opera北欧浏览器，IE7以上)

var xhr = new XMLHttpRequest();

对服务器发起请求：

浏览器方式请求：打开浏览器，输入地址栏，回车发起请求

常用状态码及其含义： 404 没找到页面(not found) 403 禁止访问(forbidden) 500 内部服务器出错(internal service error) 200 一切正常(ok) 304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )

浏览器与服务器建立连接 xhr.open(method, url, asynch); * 与服务器建立连接使用 * method：请求类型，类似 “GET”或”POST”的字符串。 * url：路径字符串，指向你所请求的服务器上的那个文件。请求路径 * asynch：表示请求是否要异步传输，默认值为true(异步)。

简单的小程序是以 post请求来发送的消息：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            function dd(){
                //创建对象
                var xhr = new XMLHttpRequest();
                //设置请求行，创建新的http请求
                xhr.open("post","/dd/d");
                //设置请求头
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                //设置请求主体，发送请求信息给服务器
                xhr.send("a=6&b=9");
                //接受服务器响应
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200) {
                            alert(xhr.responseText);
                        } 
                    }
                }
            }
        </script>
    </head>
    <body>
        <button onclick="dd()" value="ds"></button>
    </body>
</html>

下面是java程序

package dd;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.annotation.WebServlet;
/*
by:wzq
time:2017年11月16日
*/
@WebServlet(name = "d", urlPatterns = { "/d" })
public class Dd extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String parameter = request.getParameter("a");
        System.out.println(parameter);
        PrintWriter writer = response.getWriter();
        writer.print("dsdsdsdsdsdsdsd");
        writer.flush();
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
    }
}

下面是get请求方法是的ajax代码。

<script type="text/javascript">
            function dd(){
                //创建对象
                var xhr = new XMLHttpRequest();
                //设置请求行，创建新的http请求
                xhr.open("GET","/dd/d?a=6666",true);
                xhr.setRequestHeader("Content-type","application/json; charset=utf-8");
                //设置请求主体，发送请求信息给服务器
                xhr.send();
                //接受服务器响应
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200) {
                            alert(xhr.responseText);
                        } 
                    }
                }
            }
        </script>

转载于:https://www.cnblogs.com/wzqjy/p/7849997.html

andalou2829

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生Ajax代码实现

AjaxAsynchronous JavaScript And XML异步：指一段程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反的则为同步，自己理解的就是类似百度的搜索框输入内容时的提示相关的内容功能，ajax可以在不刷新整体页面的情况下，进行从后台取值，并返回数据到页面，其优势在于不阻塞程序的运行，从而提升整体上的执行效...
复制链接

扫一扫