详细为你解析AJAX的使用方法(代码贴上)

下面是我给大家整理的AJAX的使用方法，有兴趣的同学可以去看看。

HTTPS

"/jsontest/randomdata/" // there was a missing trailing /// i.e.   // was going to https://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.96041791105086431234

登录后复制

GET请求

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">                                                    function checkname(){            //ajax校验用户名            var xhr = new XMLHttpRequest();            xhr.onreadystatechange = function(){                if(xhr.readyState==4){                    document.getElementById('result').innerHTML = xhr.responseText;                }            }            //获得输入的用户名，并传递个服务器端            var ming = document.getElementById('username').value;            //对ming变量的特殊符号信息进行编码            ming = encodeURIComponent(ming);            xhr.open('get','./04.php?nm='+ming+'&age=23', true);            //xhr.open第三个参数默认异步请求为true, 改成同步请求为false;            xhr.send(null);        }                        
ajax之get形式请求
        
用户名：
        
密码：
        
    12345678910111213141516171819202122232425262728293031323334353637

登录后复制

POST请求

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">                                                    function checkname(){            //ajax校验用户名            var xhr = new XMLHttpRequest();            xhr.onreadystatechange = function(){                if(xhr.readyState==4){                    document.getElementById('result').innerHTML = xhr.responseText;                }            }            xhr.open('post','./05.php?height=165', true);            //默认为true异步请求, false为同步请求            //post请求需要把数据组织为xml格式            //以下方法必须要在"open"方法后进行设置            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");            //获得输入的用户名，并传递个服务器端            var ming = document.getElementById('username').value;            //对ming变量的特殊符号信息进行编码            ming = encodeURIComponent(ming);            //把传递的参数变为"请求字符串"传递给send方法            var info = "nm="+ming+"&age=20";            xhr.send(info);        }                        
ajax之post形式请求
        
用户名：
        
密码：
        
    123456789101112131415161718192021222324252627282930313233343536373839404142

登录后复制

FormDate收集表单数据

nbsp;html>                

登录后复制     //form表单节点对象 var oForm = document.getElementsByTagName('form')[0]; //按钮 var oBtn = $('btn'); oBtn.onclick = function(){ //先收集输入框的内容 var user = document.getElementsByName('user')[0].value; var pwd = document.getElementsByName('pwd')[0].value; var email = document.getElementsByName('email')[0].value; //通过ajax提交到服务器 var xhr; try{ xhr = new XMLHttpRequest(); }catch(e){ xhr = new ActiveXObject(“Msxml2.XMLHTTP”); } xhr.open('POST','upload.php',true); //实例化表单对象，获得表单里面的输入框的内容（主流浏览器支持） //参数就是表单节点对象 var data = new FormData(oForm); xhr.send(data); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status==200){ console.log(xhr.responseText); } } } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

AJAX跨域

//放在被访问资源上 12

登录后复制

jasonP

//在客户端定义函数,在服务端定义调用函数和传入参数,请求时传入调用参数内容,服务端就用客户端传入的函数名为调用函数名(可变函数);//https://xxx.cc.com/xx.php?param=xxx&function_name=function_name//百度标准接口https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=法国大选&cb=demo12345

登录后复制

JQUERY AJAX

语法: 
$.get(url,data,function(),dataType) 
url:请求的文件。 
data:传递数据。 
function(responseText,statusText,xhr):返回函数. 
responseText:返回的文本。 
statusText:返回的状态值。 
status 包含请求的状态 
（”success”、”notmodified”、”error”、”timeout”、”parsererror”） 
xhr:XMLHttpRequest()请求对象。 
datatype: 
“xml” – 一个 XML 文档 
“html” – HTML 作为纯文本 
“text” – 纯文本字符串 
“script” – 以 JavaScript 运行响应，并以纯文本返回 
“json” – 以 JSON 运行响应，并以 JavaScript 对象返回 
“jsonp” – 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

.get(),.get(),.post() //post与get参数无异

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">$(function(){        $('#bt1').click(function(){        var username = $('input[name=username]').val();//获取用户名的值        var pwd = $('input[name=password]').val();//获取密码的值            $.get(                'get.php',//url                {username:username,pwd:pwd},//$_GET['username']:请求的数据                function(res,sta,xhr){//回调函数                    //res:返回值                    //sta:返回的状态                    //xhr:请求的对象XMLHttprequest                    // alert('返回值是：'+res);                    if(sta == 'success'){                        $('span').html(res);                    }                }                )        });});用户名：
密码：
1234567891011121314151617181920212223242526272829303132333435363738394041

登录后复制

$.ajax()

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">$(function(){        $('input[name=username]').keyup(function(){        var username = $('input[name=username]').val();//获取用户名的值        var pwd = $('input[name=password]').val();//获取密码的值            $.ajax({                url:'post.php',                data:{username:username,pwd:pwd},                dataType:'html',                type:'post',                success:function(mydata){                    $('span').html(mydata);                }            })        });});用户名：
密码：

登录后复制

上面是我整理给大家的AJAX的使用方法，希望今后会对大家有帮助。

相关文章：

jQuery+ajax调用WCF服务步骤详解

jQuery AJAX timeout 超时紧急处理方法

JQuery+AJAX实现文件下载

以上就是详细为你解析AJAX的使用方法(代码贴上)的详细内容，更多请关注【创想鸟】其它相关文章！