Ajax笔记-加强版
1)get把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面url长度限制的原因,我们不要通过get方式传递过多的数据<form action="get.php" enctype="application/x-www-form-urlencoded">2)post理论上无限制<form action="post.php" method="post">
//代码尝试执行这个块中的内容,如果有错误,则会执行catch{}, 并且传入错误信息参数//alert(a);//new throw();//throw new Error('错了错了');无论前面的对不对都抛出一个错误
var oBtn = document.getElementById('btn');oBtn.onclick = function() {
/*1.创建一个ajax对象ie6以下new ActiveXObject('Microsoft.XMLHTTP')标准下:new XMLHttpRequest();*///用if判断和用try catch一样/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/var xhr = null;try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}/*2、设置传输内容与方式open方法参数1)提交方式2)提交地址3)是否异步true 异步:非阻塞 前面的代码不会影响后面代码的执行false 同步:阻塞 前面的代码会影响后面代码的执行*/xhr.open('get','1.txt',true);//3、发送数据请求xhr.send();/*4、等待服务器返回内容onreadystatechange : 当readyState改变的时候触发的事件readyState : ajax工作状态,请求状态0 (初始化)还没有调用open()方法1 (载入)已调用send()方法,正在发送请求2 (载入完成)send()方法完成,已收到全部响应内容3 (解析)正在解析响应内容4 (完成)响应内容解析完成,可以在客户端调用了返回的内容:responseText : ajax请求返回的内容就以文本形式(string)存放到这个属性下面,
把后台所有的类型,包括数组和json的object类型在内 都转成string类型
responseXML:返回XML形式的内容status : 服务器(请求资源)状态,http状态码:200成功,404找不到资源、500服务器端错误...*/xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出错了,Err:' + xhr.status);
}}
}
}
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
var data = JSON.parse( xhr.responseText );//将字符串转成json对象
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
} else {
alert('出错了,Err:' + xhr.status);
}
}
var xhr = null;try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}if (method == 'get' && data) {
url += '?' + data;
}xhr.open(method,url,true);if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err:' + xhr.status);
}
}
}
ajax('get','getNews.php','',function(response) {
var data = JSON.parse( response );var oUl = document.getElementById('ul1');var html = '';for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}oUl.innerHTML = html;
});
xhr.open('get', 'http://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1', true);
2)跨域:跨域名
一个域名下的文件去请求了和他不一样的域名下的资源文件,那么就会产生跨域请求
3)<script>标签
src的作用 : 加载(包含指定的外部文件)
可以跨域包含
被包含的资源可以是任何类型的文件(可以是txt,php等)
他只关注被包含的文件的内容是否是合法的JS
原理:
定义函数
包含外部文件,在被包含的文件中执行调用定义好的函数
参数的(数据)的实现
问题:包含就调用,通过动态创建<script>实现按需调用
问题:包含动态文件时可以通过一个接口实现按需生成调用函数名称
4)用JSONP解决跨域问题:
JSONP : JSON with Padding
script标签
在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情
然后需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当作这个函数的参数传入进去
4、例子:
<script>
function fn(data) {
var oUl1 = document.getElementById('ul1');var html = '';for (var i=0; i<data.length; i++) {html += '<li>'+data[i]+'</li>';
}
oUl1.innerHTML = html;
</script>
<script>
window.onload = function() {
var oBtn1 = document.getElementById('btn1');
oBtn1.onclick = function() {
var oScript = document.createElement('script');
oScript.src = 'getData.php';
document.body.appendChild(oScript);//在之前的script标签后面追加
}
}
</script>
···
getData.php:
$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
···
Ajax笔记-加强版的更多相关文章
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- 弄一个ajax笔记方便查询-$.ajax()
$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表: 参数 类型 说 ...
- 弄一个ajax笔记方便查询-基础知识篇
jQuery对Ajax做了大量的封装,jQuery采用了三层封装: 最底层的封装方法为:$.ajax() 通过最底层进一步封装了第二层的三种方法:.load().$.get().$.post() 最高 ...
- JS(ajax笔记)
简介:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是与服务器交 ...
- AJAX笔记
浏览器脚本——AJAX AJAX = 异步的 JavaScript 和 XML(Asynchronous JavaScript and XML). 是一种新的技术,它可以创建更好.更快且交互性更强的 ...
- PHP和AJAX笔记汇总
AJAX简介AJAX = Asynchronous JavaScript And XML(异步 JavaScript 及 XML)AJAX 是 Asynchronous JavaScript And ...
- Ajax笔记 XHR XMLHttpRequest
XMLHttpRequest xhr XmlHttpRequest var request ; if(Windows.XMLHttpRequest) { request ...
- AJAX 笔记
一.什么是 AJAX ? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页的技术. 通过 ...
- 用javascript写原生ajax(笔记)
AJAX 的全名叫做 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...
随机推荐
- 复利计算器app发布
复利计算器app发布 抱歉:由于无法实现服务端的持续开启,发布的app仅为简单的单机版,暂时舍弃了c/s版本的一些功能,如:投资动态管理功能. 应用详情博客:请点击这里 apk下载地址1(百度手机助手 ...
- Android开发第二阶段(7)
今天:对项目的最后总结,宣传给下届学生做准备.为了更好的了解和深入书写本次项目的总结随笔.
- [图算法] 1003. Emergency (25)
As an emergency rescue team leader of a city, you are given a special map of your country. The map s ...
- 对象库(UI MAP)
目的:能够使用配置文件存储被测页面上元素的定位方式和定位表达式,做到定位数据和程序的分离. 测试程序写好以后,可以方便不具备编码能力的测试人员进行自定义修改和配置 : package dataDriv ...
- node.js入门(一)
NodeJS是一个使用了Google高性能V8引擎的服务器端JavaScript实现.它提供了一个(几乎)完全非阻塞I/O栈,与JavaScript提供的闭包和匿名函数相结合,使之成为编写高吞吐 量网 ...
- phaser3 微信小游戏若干问题
纯属个人兴趣, 如有兴趣可共同参与维护. git: https://gitee.com/redw1234567/phaser3_wx image的地方需要修改,代码贴上 var ImageFile = ...
- laya3d 文件格式
先认识下laya3d的一些文件 导出文件说明: ls --- 场景文件: Json文件,包含场景中所有节点的数据信息,包含光照贴图信息 ...
- malloc与free函数用法
在C里,内存管理是通过专门的函数来实现.另外,为了兼容各种编程语言,操作系统提供的接口通常是 C 语言写成的函数声明 (Windows 本身也由C和汇编语言写成). 1 分配内存 malloc 函数 ...
- luogu 1967 货车运输(最大生成树+LCA)
题意:给出一颗n个点的图,q个询问,每次询问u到v的路径中最小的边最大是多少. 图的最大生成树有一个性质,对于该图的任意两个点,在树中他们之间路径的最小边最大. 由于这个图不一定联通,于是我们对它的联 ...
- bzoj4754[JSOI2016]独特的树叶
这个题....别人写得怎么都....那么短啊? 我怎么....WA了好几次啊....怎么去loj扒了数据才调出来啊? 这个算法...怎么我还是不知道对不对啊 怎么回事啊怎么回事啊怎么回事啊? 请无视上 ...