认识AJAX
来源:互联网 发布:mac百度云离线下载 编辑:程序博客网 时间:2024/05/20 02:26
1. AJAX(JavaScript Object Notation)
Asynchronous Javascript And XML (异步JavaScript和XML)
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
2. AJAX的步骤:
- 创建Ajax对象
new XMLHttpRequest()
- 填写传输地址和传输内容
ajax.open("post"||"get",URL,是否异步)
- 发送请求
ajax.send();
- 等待服务器相应
ajax.onload = fn()
; - 服务器响应后执行后续动作
ajax.responseText
例子:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body><script> window.onload = function () {// 1. 创建一个XMLHttpRequest对象 (需要考虑兼容性) var xhr = null; if (window.XMLHttpRequest){ //主流浏览器 (包括IE7、以后的版本) xhr = new XMLHttpRequest(); }else { //IE6、 IE5 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } console.log("状态A"+xhr.readyState);// 2.设置请求方式以及请求地址 、 是否为异步请求 //1>使用 get 请求 var url = './data.json'; xhr.open('get',url,true); //true 异步请求方式 false 同步 console.log("状态B"+xhr.readyState); //2>.使用 post 请求 // var url = "02_Ajax.php"; // xhr.open('post',url,true); //true 异步请求方式 false 同步 //如果post请求方式,必须要添加请求头 (必须要写在连接建立的状态以后) // xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); // console.log("状态B"+xhr.readyState);// 3.发送请求 xhr.send(); console.log("状态C"+xhr.readyState); // var params = "username="+username+"&password="+password; // xhr.send(params); //发送请求 // console.log("状态C"+xhr.readyState);// 4.回调函数 xhr.onreadystatechange = function () { console.log("状态D"+xhr.readyState); // 1.请求有响应 2.响应是正确的,返回的数据是来自请求的URL if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); // var div = document.getElementById('div'); // div.innerHTML = xhr.responseText; } } }</script></html>
3.get
- 通过url发送请求,会暴露用户信息
- 因为是用过url发送的,IE的url会将中文转码,所以在IE下中文需要使用
encodeURI
转码 - 使用get传输数据会产生缓存,解决方法是在数据后面加随机数或者时间戳
- 不同浏览器的url长度不同。
例子:
var ajax = new XMLHttpRequest();ajax.open("get","../php/get.php?user=" +userName.value ,true );ajax.send();ajax.onload = function () {span.innerHTML = ajax.responseText;}
4.post ,post与get的区别
- 通过send直接发送到服务器,理论上来说体积是无限大的(一般后端会做限制)
- 因为是直接发送给服务器,所以不会被浏览器缓存,也不会暴露用户的信息,相对get来说安全
- 因为不通过浏览器发送,所以不用转码
必须在send之前设置一个请求头(这个请求头的内容是固定的)
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
字段的拼接要放进send中,open的第二个参数直接为请地址不用拼接字段了
例子:
var ajax = new XMLHttpRequest();ajax.open("post","../php/post.php",true);ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");ajax.send("user="+this.value);ajax.onload = function () { span.innerHTML = ajax.responseText; console.log(ajax.response);}
5. eval
eval
可以计算某个字符串,并执行javascript代码。
通过eval
可以将一个长得像对象的字符串转成对象。但是会注入病毒,所以尽量少用或者不用。
var json1 = "{'name':'难'}";console.log(eval('('+ json1+')'))
阅读全文
0 0
- ajax认识
- 认识Ajax
- ajax 认识
- 认识ajax
- Ajax认识
- 认识AJAX
- 认识AJAX
- Ajax&Json<1>认识ajax
- ajax初步认识
- Ajax初步认识
- AJAX初步认识
- Ajax的初步认识
- 怎么认识ajax
- 对于ajax的认识
- AJAX-XMLHttpRequest的认识
- 对于ajax的认识
- Ajax初认识
- 全面认识Ajax
- 训练总结 8.4
- SpringBoot手动事物工具类封装
- 暑假训练第5天总结
- 接口的实例化问题,多态,以及new关键字
- codeforces 837C(暴力)
- 认识AJAX
- 想家ing8.4
- shell脚本编写希尔排序
- 【NOIP2017】Day1
- hdu1272
- ios应用程序基础:Cocoa Touch框架
- 从0开始学习 GitHub 系列之【初识 GitHub】
- (2017多校训练第四场)HDU
- MIMIC数据库中数据的下载以及MATLAB读取