博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生ajax jq跨域
阅读量:4699 次
发布时间:2019-06-09

本文共 2813 字,大约阅读时间需要 9 分钟。

  1. 原生js封装ajax

//创建XmlhttpRequest对象

function createXHR(){
    var xhr=null;
    if(XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}
function ajax(data){
    var xhr=createXHR();
    //初始化 准备配置参数
   
var type,async;
    type=data.type=='post'?'post':'get';
    async=data.async?true:false;
  xhr.open(type,data.url,async);
    //如果是post,设置请求头 执行发送动作
   
if(type=='get'){
        xhr.send(null);
    }
   else if(type=='post'){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(data.data);
    }
    //这段代码在xhr.send();执行完之后才能执行 指定回调函数
   
xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                if(typeof data.success=='function'){
                    var d=data.dataType=='xml'?xhr.responseXML:xhr.responseText;
                    data.success(d);
                }
            }else{
                if(typeof data.error=='function'){
                    data.error();
                }
            }
        }
    }
}

 

2.jq ajax使用

ajax({
    type:"get",//请求类型 默认get     url:"php/01-gettime.php",//地址
dataType:”json”,//返回数据类型     async:true,//是否异步 默认true     data:null, //参数     success: function (data) {
        alert(data);     },     error: function () {
        alert("错误");     } })
//JSONP : 服务器把json数据包装到一个方法中 //客户端提供一个对应的方法,可以处理服务器返回的数据
3.js跨域window.onload = function () {
    //动态创建script标签     var script = document.createElement("script");     document.body.appendChild(script);     script.src = "http://v.juhe.cn/weather/index?format=1&cityname=%E5%8C%97%E4%BA%AC&key=e982f3629ae77eb7345b7e42f29b62ae&dtype=jsonp&callback=handle"; } 返回一个函数callback后面handle()函数 //jsonp对应的方法 function handle(data) {
    alert(data.resultcode); } 4.jq跨域
        $(function () {
            $.ajax({
                type:"get",              async:true,
url:"http://v.juhe.cn/weather/index?format=1&cityname=%E5%8C%97%E4%BA%AC&key=e982f3629ae77eb7345b7e42f29b62ae&dtype=jsonp",                 dataType:"jsonp", //                jsonp:"cb",     //将来会替换掉地址中的  callback //                jsonpCallback:"handle",   //生成一个全局的方法  handle                 success: function (data) {
                    alert(data.resultcode);                 },                 error: function () {
                    alert("error");                 }             });         })

 

  1. Get和post区别

GET请求的数据会附在URL之后(就是把数据放置在HTTP协议头中),以?分割URL和传输数据,参数之间以&相连,如:login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。

POST把提交的数据则放置在是HTTP包的包体中。

GET方式提交的数据最多只能是1024字节, 这个限制是特定的浏览器及服务器对它的限制

理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制

Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求

  1. 中文乱码

js 程序代码:url=encodeURI(url)

  1. Function函数

//函数定义,可以先调用,后定义

Function fn(){

Console.log(111)

}

//函数表达式,不可以先调用

Var fn=function(){

Console.log(111)

}

//javascript 代码运行分连个阶段: // 1、预解析  --- 把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前 // 2、执行  --- 从上到下执行  (setTimeout,setInterval,ajax中的回调函数,事件中的函数需要触发执行)

 

  1. js 跨域
  2. jq 跨域jsonp使用

转载于:https://www.cnblogs.com/eternalness/p/7120673.html

你可能感兴趣的文章
Java 文件下载
查看>>
Jenkins的Windows Slave分布式构建和部署
查看>>
DUAL简介
查看>>
Flume
查看>>
kafka安装配置
查看>>
Lateral View使用指南
查看>>
summit网页上的smt打不开 提示无法启动应用程序 请与应用程序供应商联系
查看>>
最小生成树prim
查看>>
android--多View切换viewpager
查看>>
XML与HTML的区别
查看>>
sql server 约束
查看>>
UVa 12169 - Disgruntled Judge(拓展欧几里德)
查看>>
java 过滤器filter使用案例
查看>>
Idea java 程序打jar包(maven)
查看>>
关于三体执剑者的一点思考
查看>>
String课后作业
查看>>
完美解决IE6中fixed抖动问题的方法
查看>>
[BZOJ2958]序列染色
查看>>
Unix目录结构的来历
查看>>
LinkedList 源码小解
查看>>