Ajax使用

Ajax技术

Asynchronous JavaScript and XML 的缩写(即异步的javascriptXML)。AJAX的最大优势就是可以在不刷新整个页面的情况下与服务器交互更新局部内容。

AJAX不需要任何插件,子要浏览器运行运行javascript代码就可以。

同步交互:发送一个请求后必须等服务器响应才能发送下一个请求。

异步交互:发送一个请求后,需要等待服务器响应就可以发送下一个请求。

 

两种使用ajax的方式

 

 $(function(){

        //创建请求对象。几乎所有浏览器都支持XMLHttpRequest

        if(window.XMLHttpRequest){

            var ht = new XMLHttpRequest();

        }else{

            //IE5 IE6

            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        //准备请求信息(请求初始化),分别是请求方式,

        //请求资源路径(相对当前页面),是否采取异步的方式。

        ht.open("get","./servlets/demo1",true);

        //向请求头添加信息

        //ht.setRequestHeader(header,value);

        //readstate变化的时候就会调用这个函数

        ht.onreadystatechange=function(){

        //该属性可能是4个值中的一个,0代表尚未调用open方法,1代表连接已建立,

        //2代表请求已接收,3代表请求处理中,4请求处理完成。

        if(ht.readyState==4){

        //状态码在200-300代表请求成功,304代表请求资源未修改。

            if(ht.status==200){

                alert("success");

            //获取响应的数据。

            //可以通过JSON.stringfy(data) json字符串json数据转为json字符串

            //方法JSON.parse(data)json数据转为json字符串。

            //responseText获取字符串形式的响应数据,response获取XML格式的响应数据。

                console.log(ht.responseText);

                console.log(ht.responseXML);

            }else{

                alert("fail");

            }

        }

    }

    //真正意义上将请求发送出去。如果请求方式未post

    //send方法需要携带post的数据,如果没参数必须传入一个null

    ht.send(string);

url代表要请求的资源映射路径。

type代表请求的类型。

Data代表请求携带的参数。

success代表请求成功后调用后面的函数,其中data是响应内容。

$(function(){

        $.ajax({

            url:"./servlets/demo1",

            type:"get",

            data:"",

            dataType //客户端想要返回的数据类型

            cache //是否缓存该数据

            

            success:function(data){

                alert(data);

            }

        })

    })

 

get还是post

 

getpost更快一点,而且通常都是用get。然而在以下几种情况应该用post

无法使用缓冲文件(更新服务器上的文件或数据库)。

向服务器发送大量的数据(post没有数据限制)。

发送包含未知字符的用户输入,postget更稳定。

 

Ajax使用

上一篇:微信 获取wx.config 参数 基类


下一篇:npm 启动项目报错 Cannot find module '\@babel\compat-data\data\corejs3-shipped-proposals',解决办法