Ajax

1.课程引入
     静态网站和动态网站都是同步的,但同步方式有缺点:页面请求响应式阻塞,影响用户体验
     为了解决这个问题,可以通过变通的手段实现页面的局部更新(隐藏帧),由于隐藏帧不方便就有了Ajax
 
2.隐藏帧实现局部更新

<form action="./11inner.php" method="post" target="abc">
用户名:<input type="text" name="username">
密 码:<input type="password" name="password">
<input type="submit" value="提交">
</form>
<iframe src="" width="" height="" frameborder="" name="abc"></iframe> PHP中的代码 <?php
$uname = $_POST['username'];
$pw = $_POST['password'];
if($uname == '' && $pw == '') {
//js中的parent表示父级页面
echo '<script> parent.document.getElementById("dv").innerHTML = "登录成功" </script>';
}
else {
echo '<script> parent.document.getElementById("dv").innerHTML = "用户名或密码错误" </script>';
} ?>
3.如何实现Ajax响应请求
基本步骤:创建XMLHttpRequest对象-->配置发送参数-->执行发送-->处理响应

 、创建xhr对象
var xhr = null;
if(window.XMLHttpRequest){
标准浏览器
xhr = new XMLHttpRequest();
}else{
非标准浏览器IE6//
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
readyState==0表示xhr对象初始化完成
console.log(xhr.readyState + '---------1----------');
、配置发送参数
var type = 'get';
var myurl = './data.php';
var async = false;//第三个参数默认值就是true,表示异步;false表示同步
xhr.open(type,myurl,async);
、发送
var param = null;
xhr.send(param);
readyState==1表示请求已经发出 、处理响应(指定回调函数),如下的回调函数不是我们自己调用,而是由浏览器自动调用
那么浏览器在什么情况下调用?xhr.readyState(、、、、)这个状态值发生变化的时候调用
xhr.onreadystatechange = function(){
if(xhr.status == ){
if(xhr.readyState == ){
获取到服务器响应的数据
var result = xhr.responseText;
}
}
}
如果是同步的请求,就没有必要使用回调函数了,直接通过xhr.responseText就可以得到数据
console.log(xhr.responseText);
4.处理响应中的status (xhr.status == 200 )
xhr.status是http协议的状态码:200成功、404没有找到资源、500服务器报错
 
5.处理响应中的readyState是状态值(0,1,2,3,4)
readyState==0表示xhr对象初始化完成
readyState==1表示请求已经发出
readyState== 2表示服务器端数据已经完全返回
readyState== 3表示正在解析数据
readyState== 4表示数据解析完成,可以使用了
 
6.注意事项:
    1、xhr的对象创建需要兼容处理
    2、xhr.open的3个参数的作用
    3、xhr.readyState状态值要了解
    4、通过xhr.responseText获取服务器响应的数据
    5、对于get请求来说,xhr.send()的参数固定写成null
    6、xhr.status和xhr.readyState的作用和区别
 
 
7.阻止表单提交的几种方式
     1.return false;
     2.e.preventDefault();
     3. <input type="submit" value="提交" id="btn">把“submit”换成“button”
 
8.手动提交表单
     form.submit();
 
 
9.Ajax-get提交
Aja的get提交数据是通过url传递参数,并且需要对参数进行编码处理
xhr.send();方法参数固定为null

2.配置发送函数
            encodeURI作用对get参数进行编码处理,防止乱码
            var param = encodeURI('?username='+uname+'&password='+pw);
            xhr.open('get','./data.php'+param);
3.发送
            xhr.send(null);

10.Ajax-post提交
 
Ajax的post提交方式通过xhr.send();
函数传递的参数发送数据,而不是通过url传递数据
post提交方式必须设置请求头
post提交的数据不需要进行编码处理

 2.配置发送函数
               xhr.open('post','./33data.php');
               //设置请求头信息(对于post提交必须设置请求头)
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
3.发送
               var param = 'username='+uname+'&password='+pw;
               xhr.send(param);

11.post和get的区别

 

get post
2.配置发送函数
            encodeURI作用对get参数进行编码处理,防止乱码
            var param = encodeURI('?username='+uname+'&password='+pw);
            xhr.open('get','./data.php'+param);
3.发送
            xhr.send(null);
2.配置发送函数
               xhr.open('post','./33data.php');
              设置请求头信息(对于post提交必须设置请求头)
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
3.发送
               var param = 'username='+uname+'&password='+pw;
               xhr.send(param);
 
1、Aja的get提交数据是通过url传递参数,并且需要对参数进行编码处理
2、xhr.send();方法参数固定为null
1、Ajax的post提交方式通过xhr.send();
函数传递的参数发送数据,而不是通过url传递数据
2、post提交方式必须设置请求头(   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); )
3、post提交的数据不需要进行编码处理
12.url的标准格式
 
http://www.baidu.com/a/ac/b?flag=123#abc scheme://host:port/path?query#fragment
http----scheme scheme:通讯协议 http https ftp
www.baidu.com---host host:域名或IP地址
隐藏的 http的默认端口是80---port port:端口 浏览器是隐藏的
a/ac/b---path path:路径,端口到问号之间的部分
#后面的abc----fragment fragment:锚点 hash(哈希),作用:定位页面中的某一确定位置

13.encodeURICompontent()和encodeURI()
     encodeURIComponent()方法可以对url中的特殊字符进行编码
     encodeURI()方法不会转换特殊字符
     
   var url = 'http://www.sina.com';
     var str = 'http://www.baidu.com?username=张三&flag='+encodeURIComponent('://??:');
    console.log(encodeURI(str));
     console.log(encodeURIComponent(str));
14.解析服务器服务器返回的xml形式的数据   var result = xhr.responseXML;
15.解析服务器服务器返回的json形式的数据    var result = xhr.responseText;
14&15
解析服务器服务器返回的xml形式的数据
var result = xhr.responseXML;
解析服务器服务器返回的json形式的数据
var result = xhr.responseText;
xml数据格式的缺点:
1.元数据(描述数据的数据):元数据占用的空间较多,不利于网络传输
2.不方便解析
json数据格式
1.数据由键值对组成
2.键和值必须用双引号引起来
3.值得类型可以是:数值 字符串 数组 对象
 
json_encode();方法的作用:把数组转化成json字符串
$str = json_encode($arr);
 
JSON.parse();作用:把字符串转成对象
var str = '{"username":"lisi","age":"12"}';
var obj = JSON.parse(str);
var obj = eval('('+str+')');//也可以实现
 
eval方法的作用就是把符合js语法 的字符串转成代码并执行
eval('console.log(111)');//输出111
 
 if(xhr.status == 200 && xhr.readyState == 4){
 xml数据格式
                    var ret = xhr.responseXML;
                    var books = ret.getElementsByTagName('book');
                    var tag = '';
                    for (var i = 0; i < books.length; i++) {
                        var book = books[i];
                        var name = book.getElementsByTagName('name')[0].innerHTML;
                        var author = book.getElementsByTagName('author')[0].innerHTML;
                        var price = book.getElementsByTagName('price')[0].innerHTML;
                        var desc = book.getElementsByTagName('desc')[0].innerHTML;
                        tag += '<ul><li>'+name+'</li><li>'+author+'</li><li>'+price+'</li><li>'+desc+'</li></ul>';
                    }
                    var container = document.getElementById('container');
                    container.innerHTML = tag;
          }
 if(xhr.status == 200 && xhr.readyState == 4){
                    // 原生Ajax从服务器获取的原始数据是字符串(有可能是json格式的字符串)
                    var result = xhr.responseText;
                    // JSON.parse()的作用就是把json形式的字符串转化成对象
                    result = JSON.parse(result);
                    console.log(result);
                    var tag = '';
                    for (var i = 0; i < result.length; i++) {
                        var book = result[i];
                        tag += '<ul><li>'+book.name+'</li><li>'+book.author+'</li><li>'+book.price+'</li><li>'+book.desc+'</li></ul>'
                    }
                    var container = document.getElementById('container');
                    container.innerHTML = tag;
                }
<?php 
    header('Content-Type:application/xml; charset=utf-8');
  
?>
<?xml version='1.0' encoding='utf-8' ?>
 
<booklist>
    <book>
        <name>三国演义</name>
        <author>罗贯中</author>
        <price>20</price>
        <desc>一个杀伐纷争的年代</desc>
    </book>
</booklist>
<?php
    $arr = array(   

  array('name'=>'三国演义','author'=>'罗贯中','price'=>'20','desc'=>'一个杀伐纷争的年代'),
  array('name'=>'红楼梦','author'=>'曹雪芹','price'=>'30','desc'=>'封建社会家族的缩影'),
  array('name'=>'水浒传','author'=>'施耐庵','price'=>'40','desc'=>'一群土匪的故事'),
  array('name'=>'西游记','author'=>'吴承恩','price'=>'50','desc'=>'四个男人和一匹马的故事')

    );
 
    json_encode()方法的作用:把数组转化成json字符串
    $str = json_encode($arr);
    echo $str;
 
 print_r($arr);//也可以实现
 
 ?>
 
 
 

利用Ajax实现异步请求的更多相关文章

  1. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  2. MVC的Ajax的异步请求

    MVC的Ajax的异步请求 在这里小写一下MVC的异步请求的一点小总结. 个人认为是有两种的,一种就是跟webform一样的,依旧是使用jQuery的$.get()方法,只是请求地址不同,webfor ...

  3. ajax 实现异步请求

    ajax实现异步请求: function onclicks() { $.ajax( { url:'../hhh/columnSearch.do',// 跳转到 action // data: {tab ...

  4. AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  5. AJAX发送异步请求教程详解

    AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...

  6. ajax的异步请求小结

    如何判断是使用json还是jsp的数据传输: json字符串可以使用js,jquery,ajax,java这几种技术,页面为jsp页面,json数据为java后台传递来. 1.同步请求可以从因特网请求 ...

  7. JQ+AJAX 发送异步请求

    1. load() ; 作用:通过ajax 请求从服务器加载数据,并添加到符合要求的节点上 用法:$node.load(请求地址,请求参数) 请求参数写法: --"username=admi ...

  8. ajax json 异步请求

    function ajaxTest(){ if (true) { $.ajaxSettings.async = false; var dataJson; $.getJSON("/univer ...

  9. AJax的异步请求

    AJax的处理过程 1、传统的Web请求过程: 一般的 Web 应用程序中,用户填写表单字段并单击 Submit 按钮.然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 PHP 或 J ...

随机推荐

  1. 6个出色的Kubernetes发行版,哪款最适合你?

    作者简介 Christopher Tozzi,自2008年来以自由职业者的身份对Linux.虚拟化.容器.数据存储及其相关主题进行报道. 本文来自Rancher Labs 时至今日,通过Kuberne ...

  2. 洛谷 P3808 【模板】AC自动机(简单版) 题解

    原题链接 前置知识: 字典树.(会 \(\texttt{KMP}\) 就更好) 显然呢,本题用 字典树 和 \(\texttt{KMP}\) 无法解决问题. 所以我们发明了一个东西: \(\textt ...

  3. Contest 141

    2019-06-16 14:35:52 1089. Duplicate Zeros - Easy 问题描述: 问题求解: 很显然的可以使用O(n), O(n)的解法.主要问题在于如何在O(1)空间复杂 ...

  4. 《深入理解 Java 虚拟机》读书笔记:Java 内存模型与线程

    正文 由于计算机的处理器运算速度与它的存储和通信子系统速度的差距太大了,大量的时间都花费在磁盘 I/O.网络通信或者数据库访问上,导致处理器在大部分时间里都处于等待其他资源的状态.因此,为了充分利用计 ...

  5. OpenCV-Python BRIEF(二进制的鲁棒独立基本特征) | 四十二

    目标 在本章中,我们将看到BRIEF算法的基础知识 理论 我们知道SIFT使用128维矢量作为描述符.由于它使用浮点数,因此基本上需要512个字节.同样,SURF最少也需要256个字节(用于64像素) ...

  6. 面试刷题30:SpringBean的生命周期?

    spring是Java软件开发的事实标准. 我是李福春,我在准备面试,今天的问题是:springBean的生命周期是怎样的? 答:spring最基础的能力是IOC(依赖注入),AOP(面向切面编程), ...

  7. 模块 random 随机

    random 随机数 0 导入 >>> import random 1 random 随机小数 random.random() # 大于0且小于1之间的小数 0.7664338663 ...

  8. phpStorm 激活方式

    phpStorm10  激活方式 方法一:   注册时选择License server  http://idea.lanyus.com/    方法二:  用户名:Ly  注册码:  \===== L ...

  9. HTML 基础(六)

    一.脚本 JavaScript 是 HTML 页面具有更强的动态和交互性 <script> 标签 <script> 标签用于定义客户端脚本,<script> 元素既 ...

  10. C - Monkey and Banana

    文章目录 题意如下 思路如下 题解如下: A group of researchers are designing an experiment to test the IQ of a monkey. ...