Ajax and I

Ajax and I

I joined Ajax in. The project at that time needed Ajax technology to implement it, but it was completely new to me. I searched for relevant information online, the ending is obvious. I know the concept, but what is specific is silly and I don't understand it. Later, this technology was made by a background girl and I felt ashamed.

Here, I analyzed it carefully. The most important thing is that I don't understand the server. I remember that I was just in that company, and the director asked me to install the Java Runtime Environment, I did not understand anything in the morning, and other friends did not understand it. Because I only used the Apple computer, I just bought it, and I didn't quite understand the operation. Finally, I was installed by the Director.

At that time, my front-end technology only had a lot of energy in HTML and CSS. In JS, I would use something out of the box. In addition, I had no idea about servers, it took nearly eight months for me to kill myself and Ajax to gradually stop fighting and change their friendship. The days when I went alone were hard and unforgettable. Now Ajax has become part of my sunshine, therefore, I plan to write my own Ajax learning method, hoping to give some inspiration to those who do not understand it at first.

[Server environment installation]

If you don't know about the server, you don't have to understand or understand it. If you know how to run it, you can learn Ajax.

I recommend that you use XAMPP, the most popular PHP development environment, with one-click installation, which is convenient and convenient.

You can study the XAMPP articles and usage by yourself.

With the server environment, you can play with Ajax.

For example, the sequence is "CSS style", "HTML structure", "JAvascript/jQuery", and "JSON data]

<style>body{margin:0;background:#f2f2f2;}.ajax_box{border:solid 10px purple;padding:30px;margin:30px;}.ajax_box .box{border:solid 1px black;padding:10px;overflow:hidden;margin:10px;}.ajax_box .box div{float:left;width:25%;text-align:center;}.ajax_btn{background:purple;color:#fff;height:50px;line-height:50px;margin:0 30px;text-align:center;font-size:20px;cursor:pointer;}.ajax_btn:hover{opacity:.8;}</style>

<Div class = "ajax_box"> <div class = "box"> <div> name </div> <div> age </div> <div> gender </div> <div> motto </div> <div class = "ajax_btn"> click my Ajax request data </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script>$(function(){    $('.ajax_btn').on('click',function(){        $.ajax({            type:"GET",            url:"ajax.json",            success:function(data){                $('.ajax_box').append('<div class="box">'+                                      '   <div>'+data.ajax.name+'</div>'+                                      '   <div>'+data.ajax.age+'</div>'+                                      '   <div>'+data.ajax.sex+'</div>'+                                      '   <div>'+data.ajax.maxim+'</div>'+                                      '</div>');            },            error:function(xhr,errorText){                console.log(errorText);            }        })    })})</script>

{"Ajax": {"name": "Running snails", "age": "27", "sex": "male", "maxim": "failed to learn, growing in failure "}}

Assemble the code above, put json data under the same directory, put them together in the View layer of the server environment, and then open

The page address cannot be file: // Applications/XAMPP/xamppfiles/htdocs/dashboard/ajax/index.html.

Http: // localhost: 8080/ajax/index.html is used to run the server-side page. The preceding two concepts are as follows:

The final result is, for example, each time you click a button, a row of information will be added in the previous section.

In practice, Ajax is also used in this way, but the page is relatively complicated. In addition, there are different error handling methods for different backend servers. We will discuss them together during our work, pleasant development;

The purpose of this project is to let my colleagues like me feel the charm of Ajax as soon as possible and reduce the time for independent exploration.